In my webapp I have a search box in a fixed toolbar on the top of webpage.
I implemented the fixed position of toolbar like this....
#toolbar {
position: fixed !important;
position: absolute;
height: 25px;
width: 100%;
top: 0px;
left: 0px;
margin: 0;
z-index: 100;
font-size: 12px;
}
Now, I am implementing a keyword autocomplete function on it using a jQuery plugin.
My problem is how to keep the autocomplete suggestions fixed/attached to the search box when the window is scrolled/resized.
The css for autocomplete suggestions box is....
element.style {
display:none;
left:166px;
position:absolute;
top:96px;
width:130px;
}
.ac_results {
background-color:white;
border:1px solid #C5DBEC;
overflow:hidden;
padding:0;
z-index:99999;
}
I have a problem when I perform these operations..
- Type something in search box, causing the suggestions to appear
- With search box open, I scroll the window.
- This causes the autosuggestions box to be scrolled as well.
What can I do to solve this bug?
Here is how it looks.
![alt text](https://i.stack.imgur.com/FvdVA.jpg)
The autocomplete have scrolled over the fixed positioned input box.
Update 1: I tried adding the position: fixed;
to the autocomplete.
That gives problem in a different case.
- Type something in search box, causing the suggestions to appear
- Press escape, causing the box to disappear
- Scroll down the window
- Type something in search box, causing the suggestions to appear
- Now the search box, appears at the position it appeared before scrolling since the position is fixed
Update:
![alt text](https://i.stack.imgur.com/njzbT.jpg)
Update 2:
The following code added to autocomplete css does the trick.
.ac_results {
background-color:white;
border:1px solid #C5DBEC;
overflow:hidden;
padding:0;
z-index:99999;
position: fixed;
top: 0px;
margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
}
Regards
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…