Bootstrap 5's floating label on textarea

Question

I want to solve somehow the floating label on textarea label and text collision. Image: The site here if you want to try it live: https://getbootstrap.com/docs/5.0/forms/floating-labels/ Basicly just type in 4 or more row. I know they'll probably solve it in the future but I want a temporary solution at least. Any idea?

Answer 1

This depends a bit on how you define "fix", but one simple solution is to add a white background-bar behind the label:

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
  <div></div>
</div>

.form-floating textarea:not(:placeholder-shown) ~ label ~ div {
    width: calc(100% - 2rem);
    height: 2rem;
    background-color: white;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    padding-top: 1.625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.form-floating textarea ~ label {
  z-index: 2;
}

Another option is to auto-grow the text-area as you add content. There are a few good approaches outlined here.

Answer 2

    <div class="mb-3 form-floating">
      <label for="" class="form-label">Textarea</label>
      <textarea class="form-control py-5"></textarea>
    </div>

I added this way on one of my projects and it works fine. Add padding-top and bottom as far as you need.

Answer 3

Here's solution similar to @tim working on bootstrap 5.3 that adds a white BG to the label so that it looks better.

HTML:

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

Simply add this style:

    .form-floating>.form-control:not(:placeholder-shown)~label
    {
        margin: calc(1rem - 3px) calc(0.75rem - 2px);
        padding: 0rem 0rem;
        height: auto;
        background-color: white;
        opacity: 0.95;
        color: green;
    }

What it does:

• converts padding to margin so that background is only on the text label (Bootstrap uses padding for label and then the background covers far wider area than the label itself)
• make height auto from 100% (Bootstrap sets it to 100% due to which label covers entire area)
• the calc functions in margin are to remove difference between margin and padding that ensures the label does not move a bit when user starts to type in the box
• Optional: changed the color of the label to green so it looks different that text color behind it. Change as per your liking.
• Optional: made opacity 0.95. Change it as per your liking.

Sample:

Answer 4

I'm also facing the same issue. After several research and modified the previous answers mixed up, got it works 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>