Topic: MDB Select in modal not work properly
Hello, when putting a select inside a modal it appears to me as it is seen in the image, another problem is that when selecting the element, the select does not close.
I tried to change the values of the z-index and followed some advice from the forum but nothing worked. I use the JQuery template but with AngularJS (v 1).
thanks for the quick reply, greetings.
Add comment
Hi there,
There was a huge select update recently and Your problem should be fixed in the latest MDB version (4.5.12). Please try the following example code:
<!-- 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">
<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>
</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>
Best Regards
Here is my tweak
$(document.body).on("click",".search.form-control",function(e){
e.preventDefault();
$(this).focus();
});
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.5.10
- Device: PC
- Browser: Google Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Related topics