Bootstrap 5 floating labels

Bootstrap 5 floating labels

Loren MaxwellLoren Maxwell Posts: 302Questions: 70Answers: 9
edited September 17 in Editor

I was interesting in incorporating the floating labels from Bootstrap 5:

But it requires an unconventional order for the input and the label (input first) and also a "for" attribute for the label.

<div class="form-floating mb-3">
  <input type="email" class="form-control"
        id="floatingInput" placeholder="">
  <label for="floatingInput">Email address</label>

Offhand I don't see a way to implement this with Editor, even when making a plugin, because there's no a way to control the order of the label or add an attribute to it.

Am I mistaken or looking in the wrong place?

This question has an accepted answers - jump to answer


  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    Answer ✓

    You are correct, there isn't an out of the box way to do this in Editor I'm afraid (it does look super cool though!).

    However, what could be done is to use the field().node() method to get the container for the input in Editor and then mode the DOM elements around (and add attributes) using jQuery / DOM methods. This is the structure that Editor uses for the input elements. So the label could be moved after the input.

    Interested to hear how you get on with this - it could be something we add as a toggle option to the Bootstrap integration.


  • Loren MaxwellLoren Maxwell Posts: 302Questions: 70Answers: 9

    Thanks, @allan -- I'm not sure I'll end up working on it, but if I do I'll certainly post the solution.

    And yes -- please add as a toggle option for Bootstrap styling! Aside from being an attractive interface, it maximizes the form space.

  • BoinikBoinik Posts: 9Questions: 1Answers: 0

    Here is my solution.
    $( editor.field( 'field_name' ).node().children.item(1).children.item(0)).addClass( 'form-floating' ).append('<label for="DTE_Field_field_name">text</label>');

    and add placeholder
    { type: "textarea", name: "field_name", attr: { placeholder: 'text', style: 'height: 80px' } }

Sign In or Register to comment.