-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Form control heights #26820
Form control heights #26820
Conversation
7d0931b
to
c7a5d43
Compare
There should be also textarea height auto when rows attribute is applied. |
- Use the already present -height variables on .form-control - Consolidate the select size and multiple overrides into the .form-control base class instead of sm/lg modifiers - Remove the Sass extends from input groups since it picks up too many selectors
You can add h-auto to form-control. |
@danijelGombac Thanks, I did figure the workaround but the thing is still broken now in comparison to v4.0, because |
In latest Twitter Bootstrap versions form-control height is no more auto and this change is needed to make our search bar work properly, see: twbs/bootstrap#26820
Somehow I missed that #18842 and #18843 were still open. In my testing of the macOS Mojave beta, Safari has fixed their issue with the sizing, but Chrome still has the issue. It also apparently is a bug marked as won't fix. Thus, the only sensible solution to consistent
.form-control
heights across all supported inputtype
s in a single browser is to specifyheight
s. I've been resisting this thinking it'd be resolved by browsers, but that's no longer the case.Here's what's changed:
$input-height
to.form-control
.<select>
size
andmultiple
overrides into just the.form-control
base class instead of-sm
/-lg
modifiers.@extend
s from input groups since it picks up too many selectors, namely our<select>
overrides.Seen this demo of the changed CSS and inputs/selects.
Related test JS Bin example.
Closes #18843, fixes #18842, fixes #25923, fixes #26648, and fixes #26209.