Bootstrap 5 floating labels

Bootstrap 5 floating labels

Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10
edited September 2021 in Editor

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 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.

    Allan

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    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: 12Questions: 2Answers: 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' } }

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10
    edited December 2021

    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!!! :smile:

    .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)
    
            }
        })
    })
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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 MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    Wonderful! You guys are the best!

  • fieldsresearchfieldsresearch Posts: 3Questions: 2Answers: 0
    edited February 28

    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); }

Sign In or Register to comment.