Topic: MDB Select inside modal with more than 5 options don't work.
Why mdb select in modal not working if there are more than 5 options? It just nothing happends after clicking on select. If there are 5 or less options the same select works fine.
Expected behavior Show options list after clicking on mdb-select.
Actual behavior Nothing happend
Resources (screenshots, code snippets etc.) Live example here
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
works fine:
<select class="mdb-select md-form">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
don't work:
<select class="mdb-select md-form">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
kpienkowska staff answered a year ago
It works fine in the snippet. https://mdbootstrap.com/snippets/jquery/kpienkowska/5566772 What version of the package do you use?
maczas commented a year ago
I can't see your snippet (404). I'm using jQuery version of: * Bootstrap v4.3.1 (https://getbootstrap.com/) * Material Design for Bootstrap 4 * Version: MDB Admin Dashboard Pack 4.8.11
Kamila Pieńkowska staff commented a year ago
The snippet should work now. I am not able to test this specific setup but with newer version of jQuery package works fine.
maczas commented a year ago
I get newest version of jQuery (jQuery 3.7.0) to my example, and it's fix nothing. How can i get update to mdb4 package?
update: new version of MDB from: https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.20.0/js/mdb.min.js fix the problem. Thx.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.8.11
- Device: PC
- Browser: Firefox
- OS: Win 10
- Provided sample code: No
- Provided link: Yes