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

web
mobile

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

lguenier asked 12 months 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


Piotr Obrebski staff answered 12 months ago

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 commented 12 months ago

@ Ok good to know, thanks


Piotr Obrebski staff commented 11 months 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.


extent pro premium answered 9 months ago

Problem still exists in 4.8.10. Will you fix it?


Sebastian Kaczmarek staff pro premium answered 9 months ago

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 pro premium commented 9 months 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 pro premium commented 9 months 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 pro premium commented 9 months ago

Thank you, its OK now.


Please insert min. 20 characters.