Repository navigation
Support/how-to for floating labels #534
Description
Hi,
Is there an easy or recommended way to generate markup for floating labels? Two examples:
- Bootstrap examples: https://getbootstrap.com/docs/4.3/examples/floating-labels/
- simple_form: http://simple-form-bootstrap.plataformatec.com.br/examples/floating_label
Basically I think it needs:
-
some extra custom CSS using
:placeholder-shown -
generate form
<label>AFTER the<input>like this:<input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required> <label for="exampleInputEmail">Email</label>
I think this could be a nice addition to bootstrap_form, either as a section in the README or as actual code/API additions.
Screenshot
Activity
lcreid commentedon Jun 8, 2019
This is a great suggestion! Thanks! We'd be happy to entertain a pull request (PR) to add this functionality. I expect we'd want floating labels to be turned on at the form level via an option to
bootstrap_form_fororbootstrap_form_with.If you decide to work on a PR, please assign this issue to yourself (look for the link in the upper-right area of this page).
I'm a little busy at the moment, but if no one else picks up this issue in the meantime, I'll definitely look into it.
Thanks again for your interest in
bootstrap_form.istvanp commentedon Aug 28, 2020
Here's my drop-in monkey patch to support this on v5 (it's surprisingly straightforward):
https://gist.github.com/istvanp/9d7dedff7c56f69d5524c054565ae42a
I have not tested it in all situations so I'm going to wait before doing a proper PR.
odysseyjason commentedon Jan 12, 2023
Its 2023, not sure if something changed in the interim since the last comment, but I got floating-labels to work by adding istvanp's method above, with the addition of :
wrapper: { class: 'form-floating'}
as in:
<%= form.text_field :description , autofocus: true, autocomplete: "description", placeholder: "description", wrapper: { class: 'form-floating'} %>