Z-index in jQuery dialog. Autosuggest list not displayed properly

Question

I have a problem displaying the autosuggest box inside a jQuery dialog. The auto suggest list is displayed under the dialog no matter what. I have tried setting up the z-ind

Answer 1

The root cause is that the outermost two elements have overflow: hidden.

The simplest way to fix that is:

.ui-dialog, .ui-dialog-content {
    overflow: visible !important
}

If you're not happy with using !important (it's not good practise), you can find the place where overflow: hidden is actually being applied, and fix it there.

Quick fix version: http://jsfiddle.net/mNQVr/ (tested in Chrome, Firefox, IE)