(Mac OS Mojave 10.14.4, Chrome 74.0.3729.157)
Looking at the following code for an input-group
|
.input-group { |
|
position: relative; |
|
display: flex; |
|
flex-wrap: wrap; // For form validation feedback |
|
align-items: stretch; |
|
width: 100%; |
|
|
|
> .form-control, |
|
> .form-control-plaintext, |
|
> .custom-select, |
|
> .custom-file { |
|
position: relative; // For focus state's z-index |
|
flex: 1 1 auto; |
|
// Add width 1% and flex-basis auto to ensure that button will not wrap out |
|
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this. |
|
width: 1%; |
|
margin-bottom: 0; |
|
|
|
+ .form-control, |
|
+ .custom-select, |
|
+ .custom-file { |
|
margin-left: -$input-border-width; |
|
} |
|
} |
there are two interesting lines here: line 10 (
flex-wrap: wrap) and line 22 (
width: 1%) which seem to be the cause for the following rendering
And the code is
<div class="input-group input-group-sm">
<select class="custom-select" name="some-name">
…
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu vw-30 p-2">
…
</div>
</div>
</div>I’ve fixed this by adding flex-wrap: nowrap to the input group itself, and width: auto to the select element further down in the cascade. But I am curious about why these two values were chosen in the first place? Shouldn’t the flex-wrap be at least nowrap to ensure that an input group doesn’t break visually?
(Mac OS Mojave 10.14.4, Chrome 74.0.3729.157)
Looking at the following code for an
input-groupbootstrap/scss/_input-group.scss
Lines 7 to 30 in 2d6e086
there are two interesting lines here: line 10 (
flex-wrap: wrap) and line 22 (width: 1%) which seem to be the cause for the following renderingAnd the code is
I’ve fixed this by adding
flex-wrap: nowrapto the input group itself, andwidth: autoto the select element further down in the cascade. But I am curious about why these two values were chosen in the first place? Shouldn’t theflex-wrapbe at leastnowrapto ensure that an input group doesn’t break visually?