Question

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..

1. Type something in search box, causing the suggestions to appear
2. With search box open, I scroll the window.
3. This causes the autosuggestions box to be scrolled as well.

What can I do to solve this bug?

Here is how it looks.

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:

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

Answer 1

Why not make the search results position: fixed as well? As long as you know the height of the textbox, you can position the results list such that it is always just under the textbox element.