Support/how-to for floating labels

[johanlunds]

trafficstars

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

[lcreid]

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_for or bootstrap_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]

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]

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'} %>