mdb-select label not wrapped with the select input with 4.8.

Topic: mdb-select label not wrapped with the select input with 4.8.7

lguenier free asked 5 years ago

*Expected behavior*Label to be attached as in the code sample and wrapped in the select wrapper

Actual behavior

When $(".mdb-select").materialSelect() is called, the select and ul tags get wrapped in a div but the label is left out and so it doesn't get attached properly.

Resources (screenshots, code snippets etc.)

The code before calling materialSelect() :

<div class="form-group md-form select optional default_test">
  <select class="select optional md-form mdb-select" name="default[test]" id="default_test">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <label class="form-control-label mdb-main-label select optional" for="default_test">Test</label>
</div>

The code I have after calling materialSelect()

<div class="form-group md-form select optional default_test">
  <div class="select-wrapper select optional md-form mdb-select">
    <span class="caret">▼</span>
    <input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" value="">
    <ul id="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" class="dropdown-content select-dropdown w-100" style="width: 938.328px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
      <li class=""><span class="filtrable">    </span></li>
      <li class="active selected"><span class="filtrable"> 1   </span></li>
      <li class=""><span class="filtrable"> 2   </span></li>
      <li class=""><span class="filtrable"> 3   </span></li>
    </ul>
    <select class="select optional md-form mdb-select initialized" name="default[test]" id="default_test">
      <option value=""></option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <label class="form-control-label mdb-main-label select optional" for="default_test">Test</label>
</div>

The code I would be expecting for it to work:

<div class="form-group md-form select optional default_test">
  <div class="select-wrapper select optional md-form mdb-select">
    <span class="caret">▼</span>
    <input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" value="">
    <ul id="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" class="dropdown-content select-dropdown w-100" style="width: 938.328px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
      <li class=""><span class="filtrable">    </span></li>
      <li class="active selected"><span class="filtrable"> 1   </span></li>
      <li class=""><span class="filtrable"> 2   </span></li>
      <li class=""><span class="filtrable"> 3   </span></li>
    </ul>
    <select class="select optional md-form mdb-select initialized" name="default[test]" id="default_test">
      <option value=""></option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <label class="form-control-label mdb-main-label select optional" for="default_test">Test</label>
  </div>
</div>

I've fixed it temporarly by modifying mdb.js and changing this line

this.mainLabel = this.$nativeSelect.next('.mdb-main-label');

for this

this.mainLabel = $("label[for='"+this.$nativeSelect.attr('id')+"']");

which in my opinion makes more sense

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

Hi Iguenier,

Your solution is worth implementing. Thank you for contributing. I tested your example and it works like charm. It should be added in the next release cycle because now we have tasks already assigned.

Best Regards, Piotr

lguenier free commented 5 years ago

@ Ok good to know, thanks

MDBootstrap staff commented 5 years ago

We tested this solution from scratch with our every single material select feature and sadly it is not compatible with most of them. We can not accept this change because of the fact that cons exceed pros.

Add comment

Sebastian Kaczmarek staff answered 5 years ago

0 0 Best answer

It's been fixed in v4.8.11. You can see an example in our documentation: https://mdbootstrap.com/docs/jquery/forms/select/#searchable-with-label

Open the dev-tools and see that the label is wrapped into the .select-wrapper

extent free commented 5 years ago

Thank you. But how can i download 4.8.11 pro? I Have purchased 4.8.10 recently and cant find download link to new version.

Sebastian Kaczmarek staff commented 5 years ago

We are encountering some technical issues at the moment. Sorry about that. You should see your download link on your profile: https://mdbootstrap.com/profile/my-orders/

extent free commented 5 years ago

Thank you, its OK now.

Add comment

extent free answered 5 years ago