-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Floating Labels #21312
Comments
+1 Here is the working example ( fiddle ) with bootstrap for the same |
@IamManchanda Interesting, but I don't think differentiating between the label and placeholder text is a good idea. |
Why not .... label and placeholder are two different species i guess for eg.
But yeah if you dont want it no issue just safely remove placeholder's from the code |
Alternative with pure css |
i wouldn't mind a (CSS only) solution for this, though it will need to be made clear that the construct will likely require a very specific set/order of markup, and that the component needs enough top padding to allow for the label to then float up when field is focused or contains actual value. |
I have one I have been playing with on and off for a while now, but it does not work properly in Edge (labels start floated) nor IE (placeholder is shown too soon): https://codepen.io/aardrian/pen/MeeZrQ I am working on a simplified block of code for a blog post (removes the radio/checkbox, gets rid of validation experiments, etc), but it won't be ready for a bit owing to Reasons. The key approach, IMO, is to create good, valid, accessible mark-up first, and only then fold in the styles (and possibly) script to achieve what you want. |
The floating-labels example works very nicely - I appreciate for how smothly the placeholder turns into a label placed above the field. But it would be even better, if the label was listed before the input field in the markup. It would add value for semantics and accessibility. I tried to exchange the fields and hack the CSS to create an example, but I guess there are better CSS masters here than me. |
as CSS doesn't have any way to "go back" to style a preceding element, unfortunately we're stuck with this order. |
I was thinking of using the floating label on my website, but it appears to have been changed :-( 4.0 (https://getbootstrap.com/docs/4.0/examples/floating-labels/): 4.1 (https://getbootstrap.com/docs/4.1/examples/floating-labels/): Actually I think that the changes happened when 4.1.3 was released and a fixed height of 38px was introduced as it goes from 50px (calculated) to 38px (set): |
Ah, this is the |
Hello, any news about this feature request? Maybe an implementation in v5? |
I agree that this would be a nice feature for v5 - what would be the issue in making https://getbootstrap.com/docs/4.4/examples/floating-labels/ a part of v5? Seems to have decent support. |
I should be able to pull in https://getbootstrap.com/docs/4.4/examples/floating-labels/ and make it a legit component of Bootstrap now that we've dropped IE11. However, the classic Edge doesn't support this exactly. It doesn't break anything, but only the new MS Edge built on Chromium works as intended. |
See #30449, which is also adding support for |
I've implemented floating labels for Bootstrap 4 here: https://github.com/tkrotoff/bootstrap-floating-label |
I want to add a feature request! I would like to see floating labels be incorporated into bootstrap 4. Please take a look at this dribble shot: https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction which shows this in action as well as some pros for it:
Google uses floating labels in their material design: https://material.google.com/components/text-fields.html#text-fields-floating-labels and designers love them: https://dribbble.com/search?q=floating+label
Here is a live example http://mrlopez.me/bootstrap-floating-labels/ someone else did with bootstrap.
The text was updated successfully, but these errors were encountered: