One issue I am facing in my MVC Razor page is with the autocomplete functionality. When the textbox is first used, the autocomplete results appear below the textbox (as shown in this image), but on subsequent uses, it appears correctly directly below the textbox. What could be causing this behavior?
Here is the CSS code I am using:
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 2000;
float: left;
display: block;
min-width: 160px;
_width: 160px;
padding: 0px 0;
margin: 2px 0 0 0;
list-style: none outside none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
And here is the HTML snippet:
<input class="contentPicker input-xxlarge ui-autocomplete-input valid"
id="Content" name="Content" placeholder="Select a content"
type="text" value="" autocomplete="off">