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?

score 3 · Accepted Answer · answered Apr 13 '21 at 16:01

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.

This is not working on Bootstrap 5.3. Adding a different solution. — Sarang, Feb 03 '23 at 18:46

score 1 · Answer 2 · answered Apr 09 '21 at 14:24

1

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

answered Apr 09 '21 at 14:24

Ali Hossain

21
2

I see you added py-5 but for me it doesn't do anything really, collision still there. You may use fixed rows but i don't so the user can type in any. – South3492 Apr 09 '21 at 14:53

score 0 · Answer 3 · answered Feb 03 '23 at 18:52

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:

Bootstrap 5's floating label on textarea

3 Answers3