CODEWITHSUNDEEP
bootstrap-5selectize.js
Tom M
Tom M

Reputation: 35

Bootstrap 5 Form Floating with Selectize.js

I'm looking to apply form floating to a select field that I have modified with selectize.js.

The trouble is selectize.js turns the original <select> element to hidden and appends its own structure that doesn't necessarily tolerate form floating.

ie: Bootstrap 5 syntax:

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Now for selectize you simply initialize the instance (I like to do it in on DOM load) and assuming you have all the correct selectize files, selectize will work its magic and make the <select> element editable.

$('#floatingSelect').selectize();

This works all fine and well, but they don't play well together. ie, the label doesn't float where it needs to...

For example, the .selectize() method will append the following html right below the <select> element and make the original <select> element hidden. The outermost container will also inherit the <select> elements classes.

<div class="form-select selectize-control single">
     <div class="selectize-input items has-options full has-items">
              <input type="select-one" autocomplete="new-password" autofill="no" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: 0px;">
     </div> 
     <div class="single selectize-dropdown form-select" style="display: none; visibility: visible; width: 330px; top: 38px; left: 0px;">
          <div class="selectize-dropdown-content" tabindex="-1">
          </div>
     </div>
</div>

So while the outermost div does inherit the form-select class and thus adjusts itself accordingly inside a form-floating container - we don't actually want the outermost div to be form-select, since it is now a div (I'm not sure if this breaks any bootstrap 5 rules...). Is there is an easy way to combine the two seamlessly given that selectize supports bootstrap 5?

Upvotes: 0

Views: 38

Answers (0)

Related Questions