Floating dropdown for autosuggest

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Floating dropdown for autosuggest

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Floating dropdown for autosuggest

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Re: Floating dropdown for autosuggest

Post 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?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Floating dropdown for autosuggest

Post 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.
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Re: Floating dropdown for autosuggest

Post 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

:)
Post Reply