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

merged 2 commits into from Jul 15, 2018


3 participants

mdo commented Jul 8, 2018

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 input types in a single browser is to specify heights. I've been resisting this thinking it'd be resolved by browsers, but that's no longer the case.

Here's what's changed:

  • Applies the already present $input-height to .form-control.
  • Consolidates the <select> size and multiple overrides into just the .form-control base class instead of -sm/-lg modifiers.
  • Removes the Sass @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.

@mdo mdo added css v4 labels Jul 8, 2018

@mdo mdo force-pushed the input-height branch 2 times, most recently from 7d0931b to c7a5d43 Jul 8, 2018

@mdo mdo added this to Inbox in v4.1.2 via automation Jul 8, 2018

@mdo mdo added this to Inbox in v4.1.3 via automation Jul 8, 2018

@mdo mdo removed this from Inbox in v4.1.2 Jul 8, 2018

@mdo mdo moved this from Inbox to Ready to merge in v4.1.3 Jul 9, 2018


This comment has been minimized.

danijelGombac commented Jul 9, 2018


There should be also textarea height auto when rows attribute is applied.

Redo input height on .form-control
- 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

@mdo mdo force-pushed the input-height branch from 62872f4 to eeb1ab8 Jul 14, 2018

@mdo mdo merged commit f426a67 into v4-dev Jul 15, 2018

4 checks passed

bundlesize Good job! bundle size < maxSize
continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed
coverage/coveralls Coverage remained the same at 88.66%

v4.1.3 automation moved this from Ready to merge to Shipped Jul 15, 2018

@mdo mdo deleted the input-height branch Jul 15, 2018

@mdo mdo referenced this pull request Jul 15, 2018


v4.1.3 ship list #26867


This comment has been minimized.

hrvojegolcic commented Aug 1, 2018

I think this might need to be reopened?

After the fix now the .input-group is now broken if you have change the height of an input group .input-group:

Comparism of v4.0 and the current v4.1, when you set height: 5em to .input-group:



This comment has been minimized.

danijelGombac commented Aug 1, 2018


You can add h-auto to form-control.


This comment has been minimized.

hrvojegolcic commented Aug 1, 2018

@danijelGombac Thanks, I did figure the workaround but the thing is still broken now in comparison to v4.0, because .input-group-text is taking advantage of flexbox property align-items:stretch and .form-control has a fixed height. It's inconsistent. If you ask me, either both have to have hardcoded widths or none of them.

chhuang added a commit to institchuau/bootstrap that referenced this pull request Aug 28, 2018

Update from the main repo (#1)
* Close #25697

Removes the .justify-content-between from a navbar form example given it's the default style. Instead, mention how to adjust this and link to flex utils.

* add .text-body, fixes #25412

* add 50% translucent black and white text

* document new text color utils

* Fix Chrome's rendering of .card-columns

Uses orphans/widows trick from @fran-worley at twbs#20925 (comment).

Fixes #20925.

* Add new .flex-grow and .flex-shrink utils

* Mention browserslist config in our docs to close #25429

* Add box-shadow utilities (#25758)

* Deprecate .text-hide (#26173)

* dist

* docs edit suggestion

* Tiny grammar and punctuation tweaks to a comment.

1. It's == "it is"

2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it.

Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code.

* Dashboard updates (#26179)

* Update Dashboard example

- Replaces .sticky-top on .navbar with .fixed-top
- Adjusts padding on main content area and sidebar to account for fixed navbar
- Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue
- Adds new .shadow utility for a little extra cherry on top
- Moves sticky styles to separate feature query ruleset to avoid IE rendering issues

* Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport

* Update offcanvas example for IE support

- Replaces CSS variables with their appropriate hex values
- Fixes the broken navbar transition by moving from 2D translates to using position
- Fix broken IE navbar toggler placement with some utilities (not necessary anywhere else, but necessary given flexbox quirks)

* Allow non-string content as breadcrumb divider (#25581)

* Allow url(), attr(), none,... as breadcrumb divider
* Update breadcrumb divider docs

* Pagination move `.page-link:focus` outline value to variable `$pagination-focus-outline` so we can unset it via Sass and don't have to re-implement browser defaults

* dist

* Use https when possible.

* Fix broken URI fragments and redirects.

* docs: Switch to StackPath's URL.

While the old one will keep working, better switch to the new one.

* Remove note about multiple inputs (#26194)

* Remove note about multiple inputs

* patchs the PR and removes the word Also

* add examples to theming docs section on css vars in media queries, closes #26205

* closes #26213

* vnu.jar: Ignore all wrong language code warnings.

* Ship v4.1.0 (#26218)

* update docs path from docs/4.0/ to docs/4.1/

* bump version to 4.1.0

* Update redirects to work for 4.1 docs move

* Update docs version switcher to include latest and link to 4.0 docs

* re-run dist

* Update package-lock.json

* Update docs-navbar.html

* Clean up globals.

Also, add a missing license header in build/workbox.js.

* v4 improve coverage (#25945)

* Improve code coverage for our Button plugin

* improve coverage for our Alert plugin

* test tooltip update method

* test update and dispose for dropdown

* increase code coverage requirements

* Fix incorrect class name (#26239)

Fixes #26235

* Update dependencies and gems (#26234)

* Fix incorrect value of Stylelint option (#26192)

* update - debug search option is now in application.js (#26263)

* Dropdowns `display` default value (#26272)

* modal use global scope for default

* Docs/examples: change links to Sass documentation and to https

* fix issue related to Object.keys and Dropdown issue

* [trivial] Correct typos (#26297)

* Remove `dialog` from the HTML5 shim style (#26269)

`<dialog>`, in browsers that support it, has user agent styles of `dialog { display:block; ...} dialog:not([open]) { display:none; }`
by forcing it to `display:block` in the shim, the dialog is shown even when closed. There's no clean way to shim this for non-supporting browsers,
but arguably these browsers would have further problems with pure `<dialog>` usage anyway, and it's up to authors to then use different elements/shims.

* Resolve #26262: Add deprecated warning (#26292)

* Bump version to 4.1.0 for remaining files.

* Remove trailing space.

* Suppress text-hide deprecation warning (#26242)

* Update devDependencies. (#26309)

* Update devDependencies. (#26322)

* Be explicit in the docs for deprecating text-hide

* typo

* detect test exceeded maximum duration on Sauce Labs

* Update Jekyll to 3.8.0. (#26352)

* Print color fix dark tables and dark theads (#26193)

* workaround for IE that check indicator does not appear (#25944)

* Replace reboot monospace hack with system font stack

* add validation styles for .form-control-file (#26181)

* Remove unnecessary resetting of left round (#26238)

* Closes #26300: Add cursor pointer to carousel indicators

* Change accordion example id (#26391)

for clarity/consistency with other similar examples

* Pass docs version to search form and switch to the new index.

Also, move the search code to a separate file.

* Add comment in docs JS files.

* Doc update - remove media-breakpoint-up(xs) (#26316)

* Doc update - remove media-breakpoint-up(xs)

If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either.
The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts).

* Improve media-breakpoint-up/down docs

* Update

* Simplify custom file inner height for generated browse button

* dist

* Bump version to v4.1.1

* Fix heading levels (#26433)

H3 was used without preceding H2, breaking document flow.

* Fix z-index target (#26361)

* Fix box-shadow class with built in utility

* Fix unused box-shadow class

* fix(doc): typo in

* [trivial] Rewording in tooltips. Closes #26467 (#26521)

* Fix double-transition bug (#26452)

By applying the transition: CSS property only to classes that are
active during sliding, we avoid an unnecessary, non-zero-time
animation that although mostly invisible, does interfere with e.g.
z-index based parallax

* closes #26543, fixes #26542

* Fix/add more correct labels/descriptions for input group examples (#26551)

Among other things, closes twbs#26548

* Update devDependencies and gems.

Downgrade bundlesize until they make brotli optional since it doesn't work with node.js 10.x yet.

So, babel, qunit/karma-qunit and bundle-size aren't the latest versions.

* chore(deps): update qunit and karma-qunit

* fix(tooltip): remove useless unit test

* Update again.

* Custom forms transition

* Add disabled bg color to disabled custom file

* Add coverall to follow our coverage

* fix branch for coveralls badge

* Run coveralls only on Travis and only once.

* Update package-lock.json.

* Remove the unused docs upload preview stuff. (#26599)

* https link to

* Fix inline labels with a custom select (#26615)

Add an sr-only class to the label on inline labels with a custom select

* Changed Node.js download page (#26638)

Link to the more user-friendly Node download page (rather than just the raw directory view)

* fix(tooltip): xss in container option

* fix(collapse): xss in parent option

* fix(scrollspy): xss in target option

* Generate safari-pinned-tab.svg again.

* refactor(plugins): improve how we query elements

* chore(bundlesize): increase bootstrap.js max size

* sw.js: change to a relative link for the workbox files.

This was broken after the docs refactoring.

* Stricter stylelint rules

* refactor(plugins): query elements without jquery

* Limit .close hover/focus to non-disabled controls (#26654)

* Fix markdown code inside HTML code. (#26662)

* HTTPS link (#26663)

saves a redirect

* Negative Margins classes for custom col gutters

Feature request #26681

* Add additional wording to the Introduction section of Bootstrap docs about the bootstrap bundle js (#26688)

* Fix node_modules path (#26653)

* Remove inkscape data from brand svgs (#26708)

* Update package-lock.json with npm 6.3.1.

* Update gems.

* Update all devDependencies apart from bundlesize and babel.

Newer bundlesize versions still don't work with node.js 10.x.

babel has some bugs that we need to be fixed.

* Change karma tests to run sequential.

I was getting port in use errors.

* Update folder structure (#26729)

* Remove disabled class from wrapper

`disabled` class is not needed for wrapper.

* dist

* Move `eslint-plugin-compat` to the extends array.

* Render inline svg like img (#25874)

* Update box-shadows on .custom-select (#26754)

- Fixes #25656 where custom selects had the wrong focus shadow
- Fixes #26668 where custom selects had no inset shadow (also closes #26572 which had the wrong form classes on the first example anyway)

* Fixes Edge and IE label overlapping issue (#25919)

The 'Floating labels' example is only supported on Chrome, Safari and Firefox. On Edge and IE the label is displayed always and any text input overlaps the label which makes it unreadable.

The fix here targets Edge and IE and makes the form behave normally, the labels are hidden and the placeholder color is standard.

* dist

* feat(dropdown): add original click event

* Add broken-link-checker.

* fix(tooltip): get tip on placement change

* .browserslistrc: add `not dead`.

* Support nuget contentFiles, used for some project types

* Add js maps & tweak docs

* Fix incorrect visibility utility description regarding screen readers (#26786)

* OS X is now macOS (#26796)

* OS X is now macOS

* Update browser-bugs.yml

* Fixed logo in README

* Remove .border-bottom & .border-top classes from examples

* Update gems.

* Update devDependencies.

Only bundlesize is kept back for Node.js 10.x compatibility.

* Replace shadow with shadow-sm

* fix docs heading

* add table of classes

* class

* Restore feedback icons on validated form fields

- Only applies to textual inputs and textareas with `.form-control` and selects with `.custom-select`
- Wrap the feedback icons in a Sass variable option, $enable-validation-icons, so folks who theme can disable
- Update docs to summarize styles, mention the icons, include a textarea demo, and add mention of the Sass variable option to the Theming section

* add docs

* fix comment placement, remove unecessary prop wrapper

* add grid docs mention

* disable to fix ci

* Add missing role="button" in .navbar's .dropdown-toggle

Fixes #26830

* correct spelling errors (#26837)

* Document tooltip flickering in combination with some overflow settings

* Update

* fix(modal): removes .navbar-toggler margin

* fix(modal): fix unit test and resetting style

* dist

* Optimised Google Analytics Loading

* Make navbar download the same as homepage download

* remove reference to breakpoint-specific gutter widths which are not implemented

see #22944 and #24620

* Reorganize docs for easier deploys

With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.

* remove jobs link

* new url

* fixes #26637

* Update watch scripts to properly copy JS files
- Updates nodemon scripts to watch specific directories instead of ignoring several
- Split watch tasks for CSS and JS into main and docs
- Add docs-watch script to serve the docs instead of just build
- Add new start script so that instead of two tabs, one for docs-watch and one for watch, we just run npm start

* Move copy tasks back to css-main and js-compile so docs-github task runs properly

* change dist to only affect main since docs css isn't distributed

* clarify docs dev and add 4.0 link

* update card columns docs to make copy more accurate

closes #26586, closes #26587

* Update scripts.

* Clean up npm scripts a bit more.

`docs-serve` was duplicated. Also, extend the existent `docs-serve` script for `docs-github-serve`.

* Reword

* Ship v4.1.2

* Update

* Update issue template

* Update issue templates

* Update cursor on floating labels example (#26826)

* fixes #26579

* Fix `custom-forms` heights and position (#25602)

Now `.custom-control` will have height equal to `$font-size-base`
Fix custom checkbox and radio top position (we can't subtract rem from unit)
`$line-height-base - $custom-control-indicator-size` is not valid
Because `$line-height-base` is a unitless variable and `$custom-control-indicator-size`
is a unit (rem) variable

* Fix custom range thumb style (#26385)

* Fix focus box shadow of custom ranges

* Put `:focus` selector right after `.custom-range`
* Remove unnecessary `outline: none`

* Fix box-shadow issues in IE/Edge

* Better align

* Fix thumb vertical positions in IE/Edge

* Fix incorrect formula of thumb vertical positions in Webkit

* Fix an incorrect comment

* Fix incorrect box-shadow-width

* Form control heights (#26820)

* Redo input height on .form-control

- 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

* Prevent height on textareas

* #25842 Remove max-width from table class

* dist

* More wordsmithing

* Move the browserslist config to a separate file.

* feat(plugins): allow to import separate plugins

* Improve responsive table docs

- Splits the examples with code snippets
- Adds note about possible broken visuals

Closes #25813

* Update validation tooltips to use tooltip vars (#26887)

Updates the properties and values for which we have existing variables to match our tooltips. Come 4.2, we'll create new tooltips for these.

* Clarify custom select styles

Fixes #26281

* Add Noto Color Emoji to font stack

Fixes #26227

* Lower the specificity of vertical-align of SVG

* Remove `:not(:root)` from the workaround for SVG overflow bug

* `svg:not(:root)` specificity is very high (necolas/normalize.css#718)
* Bootstrap do not support SVG documents (See #26878)

* Fix property order

* #26912: fix custom file input z-index

* Fix modal overflow style nesting (#26742)

Nest `.modal` styling directly under `.modal-open`
to avoid issues when bootstrap is nested.

* fix `.modal-dialog-centered` on IE10/11

* Clarify to close #26329

* Allow background images for active buttons

* fix(tests): visual plugins tests

* dist

* Ship v4.1.3

* add 'lighter' and 'bolder' font weight classes (#26580)

* add 'lighter' and 'bolder' font weight classes

these are 2 special values for font weight, that will give their content a font-weight value of 100 more or less than their inherited font-weight.

probably doesn't fully fulfill this issue, twbs#23969, but it's a start

* Update .stylelintrc

* add 'lighter' and 'bolder' variables per @mdo 's request.

* Add .text-decoration-none utility class (#25933)

ref: twbs#23881 (comment)

* Custom input range disabled styling (#26540)

* Flexbox based sticky footer example (#26674)

* Flexbox based sticky footer

* Update guide message

* Use utility classes instead of custom CSS

* Fix custom range height (#26898)

Fixes #26897

* Carousel indicators transition (#26902)

* Update

* fix typo: seperator -> separator (#26982)

* Add margin utils to the grid for fully functional grid control (#26957)

* Add margin utils to the grid for fully functional grid control

* bump the max filesize

* dist

* Fix custom-select font size/padding (#26585)

fixes #26476

* Update devDependencies and gems.

* #26972: fix responsive highlight width

* package.json: be more explicit with the files we include.

* Update package.json

Fix paths to docs.

* Use Iconic github page instead of site 

The SSL certificate of the is expired

* Fix #26990 broken external example

* Hyphenate client-side/server-side (#27016)

* Fix dispose causing popover title to change

see: twbs#26847
in v4, destroy was replaced by dispose

* Commit our svgo config.

* fix(util): use getElementById when it's possible

* fix(util): use querySelector for ids

* Update devDependencies and gems.

Also, enforce LF in clean-css.

* Fix paths.

* Run all css tasks in dist script.

* broken link checker: check external links too.

It's slower, but since it runs only on Travis, we better be safe.

* docs/4.1/components/ fix useiconic link.

* Remove Chinese translation since it 404s.

* Use ES6 arrow function.

* build/*.js: set `sourceType` to module.

* Revert "broken link checker: check external links too."

This reverts commit 9e5ec00.

Unfortunately, we are getting too many timeouts.

* Revert "Remove Chinese translation since it 404s."

This reverts commit 8bb3531.

This is no longer needed.

* Add missing trailing slash in Edge tracker links.

* add babel plugin proposal object rest spread to our dev deps

* Tweak modal transform (#27005)

* Change if statement

* Update bundlesize limits.

* Update deps.

* Recommend a plugin to animate custom file input (#27088)

* dist

* #26975: remove grid columns min height

* Remove nowrap from .btn

* Use mr utility class throughout media object docs

* Fix section numbering in scrollspy doc example

* Minor: missing dot before classname in explanatory text

* Update devDependencies and gems.

* #23389: Add breadbrumb in docs search results

* Round corners on modal footer

Matches the method used for the modal header. Fixes #26955.

* Specify new height for inputs in floating label example after v4.1.3's addition of a fixed height property on .form-control

* add text-reset to text utilities (#26866)

* Remove _layouts/redirect.html.

This isn't needed, because it's not supposed to be seen normally, with JavaScript enabled.

* Move blockquote footer font size to variables

Blockquote footer font size is currently hardcoded to 80%, implying (in a comment) that this would result in the default font size. However, since the blockquote font size itself is variable, this is not necessarily true, and 80% of anything actually results in an arbitrary font size.

80% as a default is still fine.

* Remove redundant space from blockquote footer prefix

* Simpler carousel indicators css (#26996)

* Remove extra line break

@kennyadsl kennyadsl referenced this pull request Oct 19, 2018


Guides improvements #2923

kennyadsl added a commit to nebulab/solidus that referenced this pull request Oct 19, 2018

Fix Guides search bar height
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

kennyadsl added a commit to nebulab/solidus that referenced this pull request Oct 20, 2018

Fix Guides search bar height
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

kennyadsl added a commit to nebulab/solidus that referenced this pull request Nov 9, 2018

Fix Guides search bar height
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

eyewritecode added a commit to eyewritecode/solidus that referenced this pull request Nov 10, 2018

Fix Guides search bar height
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment