I have a text field on my website that needs to work as an autocomplete box. I have included the following code in the "headerbar" section of my page:
Find :<input type="text" class="input2" style="margin-bottom:0px;" id="customersearchfield">
<div id="customersearchresult" style="display:none; position:absolute; z-index:999; background:#fff; color:black; ">
CSS:
.input2{
display: inline;
margin-top: 4px;
padding: 3px;
border: 0px;
width: 200px;
}
The layout is not working as intended. The result div is positioned directly beneath the text field vertically, but it is not aligned horizontally. It is just left-aligned with the browser window.
How can I position the top-left corner of the result div directly under the bottom-left corner of the text field so that it appears right below the text field?