Stack Overflow
Stack Overflow

Questions tagged [floating-labels]

30 questions
7
votes
3 answers

Bootstrap 5 floating label for a textarea overlaps with input on scroll

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…
Pattay
  • 319
  • 1
  • 4
  • 15
7
votes
2 answers

Bad behavior of floating-labels when autocomplete

I've using the Floating labels example from Bootstrap 4.3. If the browser has already credentials on the autocompletement, the layout of will breaks. The animation (and the size & margin properties) of floating labels will only start, if the…
Adrian Preuss
  • 3,228
  • 1
  • 23
  • 43
3
votes
3 answers

Bootstrap 5's floating label on textarea

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…
South3492
  • 101
  • 9
2
votes
1 answer

Bootstrap 5 - Position floating label inside form-control with width: auto?

I'm using Bootstrap 5. I'm trying to use floating labels with centered form controls that have a width: auto instead of Bootstrap's default 100%. I'm not sure how I can get the floating labels to be inside the input fields at all times. I've…
Nicolas De Roover
  • 23
  • 1
  • 5
2
votes
2 answers

Is there a way to move labels up on a sieve plot in order to make the graphs look cleaner?

I am working on a research project and I am trying to show my boss some clean graphs that can be put into a project. I made this sieve plot and I can't figure out 1. How to rotate the x-axis labels and make pull them off the graph and 2. How to move…
Sam Cole
  • 57
  • 6
1
vote
0 answers

React Bootstrap Floating Label Overlaps Input

I'm using React Bootstrap's FloatingLabel element over a form, but my label text is longer than the form width, and breaks to two lines. Text entered in the input field is overlapped by the label. Is there any way to ensure the label doesn't overlap…
John Fotouhi
  • 11
  • 3
1
vote
1 answer

Adjust mat-form-field floating label gap

I'm trying to adjust the gap between the floating label and the border next to it. As you can see below, on the second picture: There is a wider gap on the right, between the floating label and the border. I want to adjust this so that the gap is…
Manuel Brás
  • 413
  • 7
  • 21
1
vote
0 answers

Bootstrap: Floating labels with label before input field

I want to use floating labels with some input fields. The for is based on Bootstrap 4 styles but I can't change the structure of the elements. I found this example for floating labels:…
Cray
  • 5,307
  • 11
  • 70
  • 166
1
vote
1 answer

CSS Floating Labels Not Working in Edge or IE

I am trying to figure out how to get this code to work in IE and Edge. It works perfectly in Chrome and Firefox and looks good too. I understand that it may deal with browser support for :placeholder-shown but I am not sure and can't figure it…
Joshua Olds
  • 11
  • 3
1
vote
1 answer

How to create floating label on form