Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap 5 Floating Label - additional feature #281

Open
tnegroup opened this issue May 23, 2023 · 0 comments
Open

Bootstrap 5 Floating Label - additional feature #281

tnegroup opened this issue May 23, 2023 · 0 comments

Comments

@tnegroup
Copy link

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>';
      }
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant