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.