Skip to content

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

@catchmyfame

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions