MDB Select in modal not work properly

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.

Image

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

Nassim12 pro answered 5 years ago

0 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

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:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
Launch demo modal
</button>

<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></pre>
Best Regards

Please insert min. 20 characters.

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 8 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 8 months ago

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

Add comment

Write

Create snippet

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

aionsoft

Pro User 5Support score
1Questions 0Answers 0Snippets