Question

I’m using jQuery UI Selectmenu to style a form’s dropdowns. I’ve created an example page of the form, so that you can see exactly what it is I am about to ask:

Test Page: jQuery UI Selectmenu

As you’ll see on the page that you arrive at after clicking the above example link, everything works fine with the main page’s jQuery UI Selectmenu dropdowns (fields: “Page Dropdown 1” and “Page Dropdown 2”). The problem that I have is that I cannot get the dropdowns to appear correctly on the modal window within the page.

Please click the above page’s “Search” button to get to the modal window example.

The error is that the modal window’s dropdowns (fields: “Modal Dropdown 1” and “Modal Dropdown 2”) are appearing behind the modal window. You can see the bottom of them appear just under the modal window’s bottom edge when you click on a dropdown. So my question is:

How do I force jQuery UI Selectmenu to appear within (i.e. in front) jQuery modal window and not behind it?

I am using FancyBox to create the modal window with the following code:

<a id="terminateEmployee_01" href="#terminateEmployeeShortcut">
<img src="/search/img/buttons/search_out.gif" width="200" height="34" class="rollover">
</a>

Here is the code that defines the modal window’s dropdown styling:

<script type="text/javascript">
<!--
$(document).ready(function() {
// Dropdown Width Definitions
$('select#modalDD01').selectmenu({
    style:'dropdown',
    width: 200,
    maxHeight: 238
});

$('select#modalDD02').selectmenu({
    style:'dropdown',
    width: 200,
    maxHeight: 238
});
});
// -->
</script>

And here is the code that creates the DIV in which the modal window lives:

<div style="display: none;">
<div id="terminateEmployeeShortcut" style="width:470px;height:165px;overflow:auto;">
<table width="460" cellspacing="0"> 
<tr>
<td class="bodyLabel" width="220">Modal Dropdown 1</td>
<td width="20"></td>
<td class="bodyLabel" width="220">Modal Dropdown 2</td>
</tr>

<tr>
<td width="220">
    <fieldset>
    <select name="modalDD01" id="modalDD01" tabindex="20" />
    <option value="" selected="">&nbsp;</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    </select>
    </fieldset>
</td>
<td width="20"></td>
<td width="220">
    <fieldset>
    <select name="modalDD02" id="modalDD02" tabindex="20" />
    <option value="" selected="">&nbsp;</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    </select>
    </fieldset>
</td>
</tr>
</table>

<br clear="left"><img src="/search/img/misc/spacer.gif" height="26" width="32"><br clear="left">
<a href="javascript:void(0);"><img src="/search/img/buttons/save_pop_out.gif" width="200" height="34" class="rollover"></a></center>

</div>
</div>

Again, though, perhaps seeing it in action is most helpful:

Test Page: jQuery UI Selectmenu

Perhaps I can add something to it that will make it appear on top of everything else on the page?

Please let me know what else I can provide for some help with this. Thank you so much in advance!

Answer 1

I checked your codes from firebug and u need to change your ul’s attribute that have id ‘modalDD01-menu’ and ‘modalDD02-menu’ add z-index:9999 to each of this ul’s style