HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
kendall
Forum Regular
Posts: 852 Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:
Post
by kendall » Thu Apr 02, 2009 8:29 pm
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?
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Fri Apr 03, 2009 12:00 pm
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.
kendall
Forum Regular
Posts: 852 Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:
Post
by kendall » Sat Apr 04, 2009 7:37 am
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?
kaszu
Forum Regular
Posts: 749 Joined: Wed Jul 19, 2006 7:29 am
Post
by kaszu » Sun Apr 05, 2009 5:03 am
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.
kendall
Forum Regular
Posts: 852 Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:
Post
by kendall » Sun Apr 05, 2009 9:00 am
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