-
-
Notifications
You must be signed in to change notification settings - Fork 79.2k
Form control heights #26820
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
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-controlheights across all supported inputtypes in a single browser is to specifyheights. 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-heightto.form-control.<select>sizeandmultipleoverrides into just the.form-controlbase class instead of-sm/-lgmodifiers.@extends 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.