CSS wrong work with autocomplete widget.
Please see screen shot.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

adnasa’s picture

Category: task » bug

Yes, I found the same problem on this widget too.
tagging this to a bug.

Jeff Burnz’s picture

Title: CSS and autocomplete widget » Autocomplete widget background is transparent
Version: 7.x-2.2 » 7.x-2.x-dev
Component: Other » Design
Assigned: Unassigned » Jeff Burnz
adnasa’s picture

I just solved as followed

#autocomplete ul {
  background:#ffffff;
  color:#2e2e2e;
}
#autocomplete ul li { margin:0; }
#autocomplete ul li:hover { background:none; }
#autocomplete ul div {
  cursor:pointer;
  position:relative;
  display:block;
  width:100%;
  padding:3px;
}
#autocomplete ul div:hover {
  background:#779125;
  color:#ffffff;
}

The example is trivial, but works

zilla’s picture

how did you implement this? did you alter CSS directly, or did you use a module to alter CSS without touching core css in theme? i'm having the same issue with transparencies.

adnasa’s picture

I added my own .css file to override the theme css .

zilla’s picture

was this fix moved into the recent 7x-2.2 release?

Jeff Burnz’s picture

Not as yet, updates for Corolla are scheduled, I am working out a new schedule at the moment, will advise.

Jeff Burnz’s picture

Status: Active » Fixed

Thanks adnasa, I implemented basically the same solution, but placed the colors in color.inc and used the text color (#2e2e2e) for the hover with #fff white text, so there is always enough contrast to read the list.

Pushed it to dev. Cheers.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Alexander Matveev’s picture

Status: Closed (fixed) » Needs review

What about not hover, but active? After it was selected by arrow keyboard keys

Alexander Matveev’s picture

Must be this rule I guess:

#autocomplete li.selected