Answers

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

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

  September 2021

  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 Posts: 12Questions: 2Answers: 0

  November 2021

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

  December 2021 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!!!

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

  December 2021

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

  January 2023

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

  January 2023

  Wonderful! You guys are the best!
• fieldsresearch Posts: 3Questions: 2Answers: 0

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