Bootstrap 5 - Labels on top?

washuit-iamm

https://editor.datatables.net/examples/styling/bootstrap5.html

Editor:

Official Docs:

https://getbootstrap.com/docs/5.3/forms/form-control/

How do I get my labels on top like in the official BS5 docs?

colin

There are a few options. You can have BS5 floating labels, demonstrated here. Or you could have the block style formatting, as demonstrated here.

Colin

washuit-iamm

@colin

I love floating labels, but for some layouts it falls short as you cannot see the whole label:

kthorngren

Not sure but it looks like text-overflow: ellipsis; is being applied.

Does it happen only with select lists?

Have you inspected the labels to see what styling is being applied?

Can you provide a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I built a base starter test case with BS floating labels:
https://live.datatables.net/guwafemu/491/edit

The full label is shown. If you are unable to find the issue then please post a link to your page or update my test case to show the issue.

Kevin

washuit-iamm

@kthorngren

https://live.datatables.net/zoxisopa/1/

allan

Did you try inspecting the element? There is a width being applied to it from the @media (min-width: 992px) { .col-lg-4 selector in Bootstrap.

Adding:

.form-floating > label {
  width: 100%;
}

to the CSS addresses it. Updated example.

Allan

washuit-iamm

@allan

It is still truncated:

I am starting to think that with a label long enough, unfortunately that will be unavoidable.

allan

Yes. It is on a single line due to the CSS applied to it, and it is too long to show in the space given to it, so yes, it will be truncated. I don't really see an option other than to have it overflow, which would look rubbish, make it multi-line, or make the space for it wider.

Allan