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?

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>

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;
}

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 :

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>