Hi,
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.
Thanks.
Laura Drupal 4.7RC2 Custom phpTemplate theme
Laura Scott President laura@pingv.com
pingVision, LLC 4450 Arapahoe Ave, Suite 100 Boulder, CO 80303 www.pingv.com 303.415.2559
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
On Apr 19, 2006, at 4:43 PM, Chris Johnson wrote:
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.
Thanks for suggesting the obvious. ;) I live by the dev tools on FF. I always use them to attempt to discern what's going on.
FWIW, here's what I did to solve the problem:
As an experiment, I edited the drupal.css file to add a z-index on #autocomplete, and it fixed the problem. Well, that's not optimal as then I'd be re-editing that file with every update. Then I realized what I was doing wrong: I had added a position: relative to style.css (because afaik position is required for z-index settings), but drupal.css has position: absolute, and that was good enough for me. I deleted the override in the theme, and now autocomplete is working.
Thanks for the answer, though.
Now if only I could get sub-menus to work....
Best, Laura
Laura Scott President laura@pingv.com
pingVision, LLC 4450 Arapahoe Ave, Suite 100 Boulder, CO 80303 www.pingv.com 303.415.2559