search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.42k stars 78.82k forks source link

Floating labels select option text not fully visible #34147

Closed AlexHolly closed 3 years ago

AlexHolly commented 3 years ago

Windows 10 Google Chrome Version 91.0.4472.77 (Offizieller Build) (64-Bit)

Some characters will be cut off.

Example "jgy":

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected="">jgy</option>
    <option value="1">One</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

https://getbootstrap.com/docs/5.0/forms/floating-labels/#selects

alecpl commented 3 years ago

Duplicate of #32672.

theodorejb commented 10 months ago

This issue still exists in Bootstrap 5.3. Specifically, letters with descenders like j, g, and y are cut off in select dropdowns. It can be seen right on the Bootstrap docs page for floating labels by editing one of the options to include any of these letters:
BS 5 3 bug light

The problem gets even worse when using the form-select-lg class.