Bootstrap 5 floating label for a textarea overlaps with input on scroll

Question

Looking at the documentation for a floating label of a textarea, https://getbootstrap.com/docs/5.0/forms/floating-labels/, it appears that the label overlaps with the input if the content is scrollable:

Is there a way to prevent this and make the scrollable area below the label?

Selfeducated

Answer 1

It's a known issue of Bootstrap 5: #32800.

What I have done is a small hack until they fix this bug.

Basically I put a pseudo element between the textarea and label with a white background color.

.form-floating {
  position: relative;
  max-width: 300px; /* not relevant */
  margin: 40px 20px; /* not relevant */
}

.form-floating:before {
  content: '';
  position: absolute;
  top: 1px; /* border-width (default by BS) */
  left: 1px; /* border-width (default by BS) */
  width: calc(100% - 14px); /* to show scrollbar */
  height: 32px;
  border-radius: 4px; /* (default by BS) */
  background-color: #ffffff;
}

.form-floating textarea.form-control {
  padding-top: 32px; /* height of pseudo element */
  min-height: 80px; /* not relevant */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div class="form-floating fix-floating-label">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Bucaramanga

Answer 2

First add class like input_textarea to parent div which is textarea input then add this css:

.form-floating.input_textarea label {
    min-width: 90%;
}

    .form-floating.input_textarea label::before {
        content: "";
        position: absolute;
        top: 0.9em;
        z-index: -1;
        width: 100%;
        height: 1.2em;
        background-color: white;
        box-shadow: 0 0 8px 4px #ffffff;
    }


.form-floating.input_textarea > .form-control:focus ~ label, .form-floating.input_textarea > .form-control:not(:placeholder-shown) ~ label, .form-floating.input_textarea > .form-select ~ label {
    opacity: 0.95;
    color: gray;
}

Electroscope

Answer 3

Here is the BlackSheep answer a little adapted to SCSS with Bootstrap variables for styling & sizes, and a specific class to target only textareas

$textarea-floating-label-pseudo-element-height: (
    $form-floating-input-padding-t + ($font-size-base * $line-height-base)
  ) * 0.85 - $form-floating-padding-y;
// look at $form-floating-label-transform for "0.85"

.form-floating-textarea {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: $input-border-width;
    left: $input-border-width;
    width: calc(100% - $spacer); /* to show scrollbar */
    height: $textarea-floating-label-pseudo-element-height;
    border-radius: $input-border-radius;
    background-color: $input-bg;
  }

  &.form-control:focus,
  &.form-control:not(:placeholder-shown) {
    padding-top: $textarea-floating-label-pseudo-element-height + ($form-floating-padding-y * 0.5); /* leave a little more space below the label */
  }
}

This will look like that :

Globule

Answer 4

I'm also facing the same issue. After several research and modified the previous answers mixed up, got it works without any design overlaps or any extra issues with the below css:

.form-floating {
    position: relative;
}

.form-floating:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 4px;
    width: calc(100% - 14px);
    height: 24px;
    border-radius: 4px;
    background-color: #ffffff;
}

.form-floating textarea.form-control {
    padding-top: 32px;
    min-height: 88px;
}

My HTML code:

<div class="form-floating py-1">
    <textarea class="form-control pt-4" placeholder="Leave a comment here"></textarea>
    <label>Comments <span class="required-inpt">*</span></label>
</div>

Swaney

I guess there is a slight extra issue : when you type enough lines of text in textarea so that it shows vertical scroll, then when you use arrow top to go back to your first line, the scrollbar is lazy and stops when your first line is visible (from scrollbar point of view). But your first line is below the label mask – Robinson

@ZalemCitizen Yeah, for that reason only I applied padding-top for the textarea. – Swaney