Page 1 of 1

Floating dropdown for autosuggest

Posted: Thu Apr 02, 2009 8:29 pm
by kendall
Hi guys,

I'm not as adapt with CSS as I am with PHP. I'm trying to style an autosuggest textfield so that the drop down it produces overlaps other fields/contents. AS it is now when the auto suggest is triggered...the dropdown usually shifts everything out of place.

my CSS thus far looks like...

Code: Select all

 .hide{    border: 2px solid #999999;    background-color: white;    height: 75px;    overflow:auto;    display:none;    width: 250px;    margin: 0px;    float:left;    cursor: pointer;    z-index: 1011;    position:absolute;    clear:none;}.show{float:left;    z-index: 1011;    position:absolute;    clear:none;display: block !important;} 
whats the best way to do this?

Re: Floating dropdown for autosuggest

Posted: Fri Apr 03, 2009 12:00 pm
by pickle
You're showing this dropdown with Javascript? If you're using a library - the library might be messing with the CSS somewhat.

Other than that I'm not sure. Setting position:absolute; is supposed to take it out of the normal document flow.

Re: Floating dropdown for autosuggest

Posted: Sat Apr 04, 2009 7:37 am
by kendall
http://www.triniscene.com/tsv7/galleries/

its the search that comes after the list of photos

Yes I am using a library....Spry to be exact

I have seen that javascript implements a style.position = 'relative' but how does that hamper anything?

Re: Floating dropdown for autosuggest

Posted: Sun Apr 05, 2009 5:03 am
by kaszu
Inline style is more important than stylesheet.
Try:

Code: Select all

.show, .hide {
    position: absolute !important;
}
I assume 'show' and 'hide' classes are assigned to the suggestion box.

Re: Floating dropdown for autosuggest

Posted: Sun Apr 05, 2009 9:00 am
by kendall
well i think i got it to work really... i researched and it said that I should have the position:absolute on it and to also have its parent as a position:relative so as to set lefts and tops to the 0,0 of its parent. seems to have done the trick...thanks

:)