[support] css for autocomplete?

[Chris Johnson]

Laura Scott wrote:

> I've run into a strange problem where the autocomplete drop-down for 
> freetagging on node/add/foo is actually behind the rest of the page 
> elements. In other words, the form labels and fields are on top of the 
> drop-down display. If the fields are opaque, then the drop-down 
> disappears behind the body textarea.
> 
> I'm not a js adept. I'm trying to figure if the drop-down has css class 
> or id designations I can use to do something like bump the z-index -- or 
> something! I tried to discern what's in the autocomplete javascript, and 
> guessed at an autocomplete class, but adding .autocomplete stylings to 
> the style.css file hasn't seemed to provided any solutions.

> Laura

Laura,

I'm not sure what your problem is, but for startes, it appears that some of 
the autocomplete styling is not done with a CSS class, but with a CSS ID.  For 
example, see misc/drupal.css about line 575.  Note the use of #autocomplete 
instead of .autocomplete.  There is one exception in the misc.css file, the 
class on the input elements, html.js input.form-autocomplete {}.  Still, I 
don't see anything related to z-index, so the behavior you are seeing is 
rather odd.

That said, there is a class "autocomplete" added to the HTML input element in 
theme_textfields(), assuming your custom theme is not overriding it.  I'm also 
noticing that the id for those elements appears to be the element's normal id 
with -autocomplete appended, so the result might be something like 
name-autocomplete.

I'd suggest using your browser to "view source" to see if you can spot the 
actual HTML and CSS wrapped around the form elements in question.  I would 
also suggest using Firefox and getting the web developer tools extension, will 
give you lots of tools to figure out what's going on and how it's styled.

Of course, there may well be a problem beyond just your custom theme.  But 
this is how I would start debugging if it were my site and theme.

Good luck.

..chrisxj