Topic: MDB Select in modal not work properly

aionsoft pro asked 5 years ago


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.

Nassim12 pro answered 5 years ago


Here is my tweak
$(document.body).on("click",".search.form-control",function(e){
e.preventDefault();
$(this).focus();
});

Mikołaj Smoleński staff commented 5 years ago

Thanks Nassim for Your solution. 
Best Regards


Mikołaj Smoleński staff answered 5 years ago


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">&times;</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

maczas free commented 10 months ago

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.


Kamila Pieńkowska staff commented 10 months ago

You've started a new thread so I will address your question there.



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes