[#21301] - [4.0] breaks bootstrap 4 width control of inputs and selects by hard-coding a max-width
- Closed
- 7 May 2020
- Medium
- Build: master
- # 21301
Steps to reproduce the issue
<div class="row">
<div class="col-md-3">
<input class="form-control" placeholder="Input 1" type="text" />
</div>
<div class="col-md-3">
<input class="form-control" placeholder="Input 2" type="text" />
</div>
<div class="col-md-4">
<select class="custom-select">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="col-md-2">
<input class="form-control btn btn-secondary" value="Click me" type="button">
</div>
</div>Expected result
inputs have widths 41.6% , 41.6%, 16,6%
Actual result
all inputs and selects that use bootstrap 4 CSS classes
.form-control
.custom-selectare hard-coded to a max-width of 240px
System information (as much as possible)
4.0-dev
Additional comments
Why use the bootstrap classes if we are going to hard-code general rules like this
i understand that there may be need for this
but if there is need for the 240px max-width then make it to be more specific
(.form-control {} rule should be prefixed with something appropriate ...)
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Title |
|
||||||
| Category | ⇒ | Layout Templates (admin) |
| Status | New | ⇒ | Discussion |
brianteeman
- | Labels |
Added:
J4 Issue
|
||
It is still a valid issue. The problem is we are hacking Bootstrap to fit a very particular design by overriding it. By right changes to Bootstrap should only exist in the _variables.scss otherwise we are going to likely break certain aspects of it (as you have rightly pointed out). Overrides should only be attached to our own (non-bootstrap) classes. Currently them classes do not exist.
It is not that this would effect 3rd extensions so much
as said it would be simple to work around it
as it effects some core screens
please go to "Install via URL" page and see how small is the field for URL
- the right part is hidden
- and in some browsers e.g. firefox when trying to select from a URL from history, you can not see the full text (it works better with chrome)
I guess we can remove the global scope of the max-width just to where it is required,
I'll have a look later. SCSS compiler seems to be broke at the moment.
Please add Label "J4 Backend Template".
infograf768
- | Labels |
Added:
?
Removed: J4 Issue |
||
| Labels |
Added:
J4 Issue
|
||
| Title |
|
||||||
| Title |
|
||||||
| Labels |
Removed:
J4 Issue
|
||
Yes it is no longer an issue
| Status | Discussion | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-05-07 10:49:19 |
| Closed_By | ⇒ | ggppdk |
This will be a problem for as long as we target Bootstrap classes in the template CSS. Currently with a lot of elements, these are the only classes that exist.