Page 1 of 1

Help with auto complete popup

Posted: Fri Aug 05, 2011 9:01 pm
by yacahuma
Hello,

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;
    }
This is the html I am using

Code: Select all

<div class="suggestionsBox" id="suggestions" style="display: none;"><div class="suggestionList" id="autoSuggestionsList">&nbsp;</div></div>

Re: Help with auto complete popup

Posted: Sat Aug 06, 2011 1:19 pm
by McInfo
Try absolute positioning.

Re: Help with auto complete popup

Posted: Mon Aug 08, 2011 6:33 am
by yacahuma
thank you . that work. So everything but absolute will cause this behavior?

Re: Help with auto complete popup

Posted: Mon Aug 08, 2011 12:11 pm
by McInfo
The documentation explains it better than I can.

Re: Help with auto complete popup

Posted: Mon Aug 08, 2011 12:52 pm
by yacahuma
I really hope someday to have the time to truly understand css. Most of the time id drives me crazy, how thing move.