BrowserProvided AutoComplete Dropdown is sticking(floating) when scrolling the subpage

StackOverflow https://stackoverflow.com/questions/23603377

Question

I have a webpage where the top header is fixed like many web pages and the other body content may sometimes have a scrollbar. I have turned Autocomplete feature of browser to on. I have some textbox to accept user input. On clicking the textbox it opens the autocomplete dropdown with values which user has entered previously. Now if i scroll the page textbox is moving but autocomplete dropdown is not. Issue is with IE as well as Chrome.

Following is the sample code(Insert more blank lines to create a scrollbar on your browser):

<html>
    <head>
        <style type="text/css">
                 body,div {
                                   margin: 0;
                                   padding: 0;
                                   }
            body {
                /* Disable scrollbars and ensure that the body fills the window */
                width: 100%;
                height: 100%;
            }

        #main {
                /* Provide scrollbars if needed, position below header, and derive     height from top/bottom */
                overflow: auto;
                position: absolute;
                width: 100%;
                top: 200px;
                bottom: 0;
            }
        </style>
    </head>

    <body>

    <div style='position:absolute;top:0px:left:0px;'>
        <span> This is fixed content2</span>

    </div>
    <div id="main">
        <pre>
            <form id="myform" action="http://www.google.com">
            <a href="www.google.com">Google</a>
            <input type="submit"/>

            <input type="text" name="t" id="t"/>







        <select name="sel"> 
            <option>12</option>
            <option>13</option>
            <option>22</option>
            <option>45</option>
        </select>














            </form>
            </pre>
            </div>
    </body>
</html>
Was it helpful?

Solution

This is a default behaviour of the browser. To overcome this you need to create a custom auto suggest using javascript or jquery and append it to that textbox, so that it always sticks to that textbox.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top