2

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-index property of autosuggest to > 1004. But no luck.

Below is the screenshot.

Enter image description here

This is the CSS class I have used to style the autosuggest list:

ul.as-list {
    position: absolute;
    list-style-type: none;
    margin: 2px 0 0 0;
    padding: 0;
    font-size: 14px;
    color: #000;
    font-family: "Lucida Grande", arial, sans-serif;
    background-color: #fff;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 0 2px 12px #222;
    -webkit-box-shadow: 0 2px 12px #222;
    -moz-box-shadow: 0 2px 12px #222;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    z-index:6000;
}

li.as-result-item, li.as-message {
    margin: 0 0 0 0;
    padding: 5px 12px;
    background-color: transparent;
    border: 1px solid #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    z-index:6000;
}

I have uploaded the complete code in this jsfiddle page. You can see the problem there clearly. How can I fix it?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
RameshVel
  • 64,778
  • 30
  • 169
  • 213

4 Answers4

6

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)

thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

This is what you can do:

$("#txtTagAdd").autoSuggest(data.items, {
                        asHtmlID:"tagg",
                        selectedItemProp: "name",
                        searchObjProps: "name",
                        selectionLimit:4,
                        limitText: "Only 4 tags unique tags allowed for each suggestion",
             resultsComplete: function(){
                 var h = $('ul.as-list').innerHeight() + 20;
                 $('div.as-results').css({"height": h + "px"});
             }
});
Naveed Ahmad
  • 3,176
  • 1
  • 15
  • 18
1

This may do it:

ul.as-list {
    position: fixed;
    /*...*/
}
KooiInc
  • 119,216
  • 31
  • 141
  • 177
1

It should work as I tested that in jsfiddle link you provided:

div.as-results{position:relative;z-index:1;}
div.as-results ul.as-list {
    position: fixed;
    list-style-type: none;
    margin: 2px 0 0 0;
    padding: 0;
    font-size: 14px;
    color: #000;
    font-family: "Lucida Grande", arial, sans-serif;
    background-color: #fff;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 0 2px 12px #222;
    -webkit-box-shadow: 0 2px 12px #222;
    -moz-box-shadow: 0 2px 12px #222;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    z-index:6000;
}
Naveed Ahmad
  • 3,176
  • 1
  • 15
  • 18
  • @naveed,which browser you are using... after applying the above style, i am still getting the same problem. may be you can save the your version of the jsfiddle and share a link. i ll look into that – RameshVel Apr 17 '11 at 13:00
  • @Ramesh Vel: mmm, looks like the fiddle I edited, using position:fixed, really. http://jsfiddle.net/fTYsC/2/ – KooiInc Apr 17 '11 at 13:02
  • @naveed, your code works as expected in chrome, not in firefox.. i just verified – RameshVel Apr 17 '11 at 13:04
  • @Ramesh Ve, I was using Chrome, let me check for any other solution, however I knew position: fixed is not supported across all browsers. – Naveed Ahmad Apr 17 '11 at 13:07
  • @Naveed afaik `position:fixed` is *not* supported by IE6 (7 perhaps, not sure) and supported by all other browsers. – KooiInc Apr 17 '11 at 13:11
  • @KooiInc that's correct, but in his case it's not working. Well, @Ramesh I tried removing the jQuery UI Dialog and then checked your code and it works perfect with your css. jQuery UI Dialog is basically not allowing the internal layer to show up on top of it as both have the position absolute and the dialog layer gets a higher z-index. – Naveed Ahmad Apr 17 '11 at 13:28