Databases
StackOverflow2013
Postsdbo
POSelect dropdown stays over bootstrap modal
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSelect dropdown stays over bootstrap modal
    text
    copied!<p>I have an input that when changed, there are some validations made and eventually a notification is displayed using a modal.</p> <p>The problem is that if on the same page there is a select and the input's "onChange" is triggered by clicking on the select, the select's dropdown menu is rendered over the modal and doesn't get "hidden" as it can be seen on this fiddle: <a href="http://jsfiddle.net/GSqvB/" rel="nofollow">http://jsfiddle.net/GSqvB/</a></p> <p>The HTML code is:</p> <pre><code>&lt;div id="modal-from-dom" class="modal hide fade"&gt; &lt;div class="modal-header"&gt; &lt;a href="#" class="close"&gt;×&lt;/a&gt; &lt;h3&gt;Modal Heading&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;One fine body…&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;a href="#" class="btn primary"&gt;Primary&lt;/a&gt; &lt;a href="#" class="btn secondary"&gt;Secondary&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;span&gt;Write someting then click the select &lt;input type="text" id="inputToChange"&gt; &lt;/input&gt;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;span&gt;Click me after filling the input &lt;select&gt;&lt;option value="1"&gt;This&lt;/option&gt;&lt;option value="2"&gt;should&lt;/option&gt; &lt;option value="3"&gt;be&lt;/option&gt;&lt;option value="4"&gt;hidden&lt;/option&gt;&lt;/select&gt;&lt;span&gt; </code></pre> <p>The modal is being launched with this: </p> <pre><code>var $modal = $('#modal-from-dom'); $modal.modal({backdrop: true, keyboard: true, show: false}); $('#inputToChange').on('change', function(event) { $modal.modal('show'); }); </code></pre> <p>To simulate the behavior you must write something on the input and then click on the select.</p> <p>If I hide the select and show it when the modal is closed it works, but it seems a really ugly workaround.</p> <p>Is there a way to make the select "close" or at least to stay behind the modal?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload