Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !26820

Form control heights

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge input-height into v4-dev Jul 08, 2018
  • Overview 0
  • Commits 2
  • Pipelines 0
  • Changes 2

Somehow I missed that #18842 (closed) and #18843 (closed) 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 (closed), fixes #18842 (closed), fixes #25923 (closed), fixes #26648 (closed), and fixes #26209 (closed).

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: input-height