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
  • Issues
  • #28901
Closed
Open
Issue created Jun 14, 2019 by Administrator@rootContributor

Text input height in input groups not adjusted properly when input-group-text height is increased

Created by: catchmyfame

I'm not sure if this is a bug or intended, but if you increase the font size or height of the input-group-text in an input group, the associated input field doesn't adjust its height properly.

Sample input group (takes from https://getbootstrap.com/docs/4.3/components/input-group/):

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Generates: image

Increase the font size on the input-group-text element:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" style="font-size: 2em">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Generates: image

A simple solution is to add height: auto; to the input field which produces what I would think is the desired result:

image

When browsing the docs I noticed that in the 4.0.0 version that changing the font size or height of the input-group-text element didn't have this issue, but it does on the 4x releases going forward.

Assignee
Assign to
Time tracking