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.
BrowserProvided AutoComplete Dropdown is sticking(floating) when scrolling the subpage
-
20-07-2023 - |
Domanda
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>
Soluzione
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow