I need some help to put the final touch on my autocomplete feature. All I need know is to properly place the popup. I obtained the original css from a site in the internet. The problem is that the popup move all the other fields in the form. Please take a look at the picture. In my opinion the autocomplete should display a box bellow the field and not move anything else. My css skill are VERY limited. I am including a picture of the before (A) and after (B) and the way I want it to look (C).
Thank you for your help
This is the CSS
Code: Select all
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
Code: Select all
<div class="suggestionsBox" id="suggestions" style="display: none;"><div class="suggestionList" id="autoSuggestionsList"> </div></div>