Skip to content

Bootstrap 5 Floating Label - additional feature #281

Description

@tnegroup

If anybody is interested, I modified the constructor template so that it allows for a floatingLabel option string to be added and it will behave the same way as floating labels in Bootstrap 5:

image

  , template: function() {
      if (this.options.bsVersion == '2') {
        return '<div class="combobox-container"><input type="hidden" /> <div class="input-append"> <input type="text" autocomplete="off" /> <span class="add-on dropdown-toggle" data-dropdown="dropdown"> <span class="caret pulldown" style="vertical-align: middle"/> <i class="icon-remove remove"/> </span> </div> </div>'
      } else if (this.options.bsVersion == '3') {
        return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> <input type="text" autocomplete="off" /> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret pulldown" /> <span class="glyphicon glyphicon-remove remove" /> </span> </div> </div>'
      } else {
        return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> ' + (this.options.floatingLabel ? '<div class="form-floating">' : '') + '<input type="text" autocomplete="off" />'
            + (this.options.floatingLabel ? '<label for="' + this.$source.attr('id') + '" class="form-label">' + this.options.floatingLabel + '</label></div>' : '')
              + '<div class="input-group-text dropdown-toggle' + (this.options.iconCaret ? ' custom-icon' : '') + '" '+ (hasPopper ? ' data - toggle="dropdown" data - reference="parent"' : '') + ' > '
              + (this.options.iconCaret ? '<span class="' + this.options.iconCaret + ' pulldown" />' : '')
              + (this.options.iconRemove ? '<span class="' + this.options.iconRemove + ' remove" />' : '<span class="utf-remove remove" />')
          + '</div> </div> </div>';
      }
    }

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions