user1837608 user1837608 - 2 months ago 19
CSS Question

jquery autocomplete list does not stick with parent input element

I'm having some difficulty adapting jqueryUI autocomplete to my site's CSS layout.

Whenever I call the autocomplete function onto an input field, the list opens as expected. Since the input lives within a div that is of fixed height, when the user scrolls that div, the autocomplete list stays fixed.

Has anyone encountered this and know of a workaround? This issue does not occur when the parent div is not fixed in height.

I've made a jsfiddle mockup here: http://jsfiddle.net/NSm7f/1/

here is my sample code:

<div class="root">
<div id="Header">
<div class='heading'>Test</div>
</div>
<div class='box' id="Wrapper">
<div class='box' id="Leftpanel">
<p>some text</p>
<h1>Other stuff</h1>

<br>
<br>Autocomplete box:
<input id="box1">
<p>some text</p>
<h1>Other stuff</h1>

<br>
<br>Another autocomplete:
<input id="box2">
<p>some text</p>
<h1>Other stuff</h1>

<br>
<br>
<p>some text</p>
<h1>Other stuff</h1>

<br>
<br>
<p>some text</p>
<h1>Other stuff</h1>


<br>
<br>
</div>
<!--Leftpanel-->
<div class='box' id="Rightpanel">
<form>
<textarea rows="33" cols="45"></textarea>
<br>
</form>
</div>
<!--End rightpanel-->
</div>
<!--wrapper-->
</div>
<!--root-->


My JS (yes, I have jqueryUI and the default jqueryUI css loaded):

$("#box1").autocomplete({
source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
});

$("input#box2").autocomplete({
source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
});


and my css:

.box {
float: left;
}
#root {
max-width: 1200px;
margin: 0 auto;
}
#Wrapper {
width: 100%;
display: table;
}
#Leftpanel, #Rightpanel {
vertical-align: top;
}
#Leftpanel {
width: 57%;
display: table-cell;
height:750px;
color: #B29D72;
overflow:scroll;
background-color: #272F44;
-moz-border-radius: 2px;
border-radius: 5px;
padding: 1%;
margin:0.5%
}
#Rightpanel {
width: 37%;
display: table-cell;
height: 750px;
color: #B2A283;
background-color: #0D162C;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1%;
margin:0.5%
}
#Sidebar {
width: 15%;
background-color: #B2A283;
color: #0D162C;
padding:1%;
margin:0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
#Sidebar a:link {
color: #FFF4CB;
}
#Footer {
width: 97%;
height: auto;
background-color: #B2A283;
color: #0D162C;
padding: 1%;
margin: 0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
#Footer a:link {
color: #FFF4CB;
padding-left: 5px;
padding-right: 5px;
}
#Footer A:hover {
color: #CA9221;
}
#Sidebar .slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}

Answer

Here is a solution that does not involve any scripting and seems to do the trick.

Autocomplete, by default, appends the list to the body of the document. If you insert the option to appendTo: "parent div that is fixed height" and change the UI-css class for ui-autocomplete from postion:fixed to position:relative, the list will follow the div scroll.

I think this is an easier solution to implement, though @Trevor's will also work.

see this updated fiddle: http://jsfiddle.net/NSm7f/3/

The key is adding this to your document or change the UI-css with:

.ui-autocomplete {
    position: relative;
}
Comments