Bootstrap 5 floating labels

Loren Maxwell

I was interesting in incorporating the floating labels from Bootstrap 5:
https://getbootstrap.com/docs/5.0/forms/floating-labels/

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="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

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?

allan

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.

Allan

Loren Maxwell

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.

Boinik

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

Loren Maxwell

Here's my take using the on "open" event for the editor.

Essentially when the editor form opens the function goes through the list of fields and if the type matches one of the floating label types (readonly, text, or textarea) then it does the witchcraft to move the elements into the what the Bootstrap floating labels require.

Select could also be added without too much trouble if someone wanted to.

Should just be able to copy the code below onto the end of any instance of Editor.

However I strongly hope a future feature is added to Editor itself to have floating labels as an option!!!

.on("open", function () {
    var that = this

    fields = that.order()

    fields.forEach(function(e) {

        var floating_label_types = ["readonly", "text", "textarea"]
        var type = that.field( e).s.opts.type

        if (floating_label_types.includes(type)) {

            node = $(that.field(e).node())
            wrapper = node.find(".DTE_Field_InputControl")
            control = wrapper.children(":first-child")
            label = node.find("label")

            wrapper.addClass("form-floating")
            control.addClass("form-control").attr("placeholder", e)
            label.appendTo(wrapper)

        }
    })
})

allan

Nice workarounds .

I've not yet had a chance to see how we can implement this in Editor (and without causing issues for the other styling libraries), but it is on my radar!

Allan

allan

Just following up on this as I'm going through my backlog - apologies for the long delay! I've committed in a change for this which will be in Editor 2.1, due soon.

With 2.1 you'll be able to add:

        bootstrap: {
            floatingLabels: true
        }

to your Editor initialisation and it will do something similar to what you suggested above .

Regards,
Allan

Loren Maxwell

Wonderful! You guys are the best!

fieldsresearch

Floating Labels does work a little odd with Select statements. You can't see the values of the select statements after choosing the value.

EDIT: Nevermind, this was affected by a Joomla 5 Bootstrap template which stupidly overwrote the height with:
select.form-control:not([multiple]), select.inputbox:not([multiple]), select:not([multiple]) { height: calc(2.25rem + 2px); }