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 asked 3 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


MDBootstrap staff pro premium answered 3 years 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 3 years ago

@ Ok good to know, thanks


MDBootstrap staff pro premium commented 3 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.


extent answered 3 years ago

Problem still exists in 4.8.10. Will you fix it?


Sebastian Kaczmarek staff pro premium answered 3 years 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 commented 3 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 pro premium commented 3 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 commented 3 years ago

Thank you, its OK now.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: Macbook
  • Browser: Chrome
  • OS: Mac os
  • Provided sample code: No
  • Provided link: No
Tags