# Help with auto\_complete css

**URL:** <https://www.ruby-forum.com/t/help-with-auto-complete-css/88614>\
**Category:** Rails\
**Created:** [March 13, 2007, 1:11am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614 "2007-03-13T01:11:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 13, 2007, 1:11am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/1 "2007-03-13T01:11:50Z")

</div>

I have three fields in a row above a grid of data and I’d like to use  
autocomplete in these fields; however, the selection list appears  
_behind_ my data grid, which hides the list.

Any suggestions about how to override autocomplete css? I’ve tried  
plunking some style code into my view template, but it doesn’t seem to  
have any effect.

There must be some competing autocomplete styles that are winning  
out.

Thanks for your help!  
Dave

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 19, 2007, 12:36am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/2 "2007-03-19T00:36:33Z")

</div>

Hello?

What is it about autocomplete and css that nobody has anything to say  
about overriding the default stylesheet? Maybe like myself, most of  
you are too buried in the code to learn much about css.

Anyway, another call for help on this one.

Thanks!  
Dave

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 19, 2007, 12:42am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/3 "2007-03-19T00:42:34Z")

</div>

As I recall you customize the css properties by defining a .autocomplete  
class in your stylesheet. Are you doing this?

– Long  
[http://MeandmyCity.com/](http://MeandmyCity.com/) - Free online business directory for local  
communities  
[http://edgesoft.ca/blog/read/2](http://edgesoft.ca/blog/read/2) - No-Cookie Session Support plugin for  
Rails

----- Original Message -----

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 19, 2007, 2:24am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/4 "2007-03-19T02:24:40Z")

</div>

Thanks for your reply.  
Yes I am defining the autocomplete classes in my stylesheet. I’m  
actually embedding them after the body tag in my layout.  
An extra set of classes always gets defined _after_ mine. If I look at  
the styles with firebug, I can see my classes are present in  
controller-name and then an extra set also present in controller-name.  
(where my controller-name is support).

Dave

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 19, 2007, 10:32am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/5 "2007-03-19T10:32:24Z")

</div>

On Mar 19, 2007, at 12:35 AM, Dave wrote:

> What is it about autocomplete and css that nobody has anything to say  
> about overriding the default stylesheet? Maybe like myself, most of  
> you are too buried in the code to learn much about css.

Are you using text\_field\_with\_auto\_complete? If that was the case the  
helper accepts an undocumented option :skip\_style:

\<%= text\_field\_with\_auto\_complete :object, :method,  
{}, :skip\_style =\> true %\>

Does that fix it?

– fxn

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 19, 2007, 3:20am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/6 "2007-03-19T03:20:45Z")

</div>

Well that is odd. An extra set of eyes may help if you would  
post your code.

– Long

----- Original Message -----  
“Dave” wrote:

> On Mar 18, 5:37 pm, “Long” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:
> 
> > As I recall you customize the css properties by defining a .autocomplete  
> > class in your stylesheet. Are you doing this?
> > 
> > – Longhttp://MeandmyCity.com/- Free online business directory for local  
> > communitieshttp://edgesoft.ca/blog/read/2- No-Cookie Session Support  
> > plugin for Rails

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [March 20, 2007, 5:10am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/7 "2007-03-20T05:10:50Z")

</div>

Thanks for your help, Long and Xavier!  
I’ve added the option to the text\_field helper in my template:

\<%= text\_field\_with\_auto\_complete :rma, :number, {},  
{:skip\_style=\>true} %\>

and have tested with a simplified auto\_complete\_for in my controller:

auto\_complete\_for :rma, :number

It works like a charm!

Thanks again!  
Dave

---

<div class="post-metadata">

**Author:** ![sp00nyg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sp00nyg](https://www.ruby-forum.com/u/sp00nyg)\
**Post date:** [November 3, 2009, 9:22am UTC](https://www.ruby-forum.com/t/help-with-auto-complete-css/88614/8 "2009-11-03T09:22:05Z")

</div>

Dave Dumaresq wrote:

> I have three fields in a row above a grid of data and I’d like to use  
> autocomplete in these fields; however, the selection list appears  
> _behind_ my data grid, which hides the list.
> 
> Any suggestions about how to override autocomplete css? I’ve tried  
> plunking some style code into my view template, but it doesn’t seem to  
> have any effect.
> 
> There must be some competing autocomplete styles that are winning  
> out.
> 
> Thanks for your help!  
> Dave

I had the same symptom of the auto-completion list items appearing  
behind fields that were immediately below the auto-complete field. I was  
retrofitting to an existing app with a couple of convoluted style  
sheets. One sheet had an item with “z-index 10”. I set new style sheet  
items for auto-complete with “z-index 100” which fixed my problem.

View form snippet:

 \<%= text\_field\_with\_auto\_complete :article, :contains, { :size =\> 15 }, :skip\_style =\> true, :method =\> :get -%\>

Controller snippet:  
def auto\_complete\_for\_article\_contains  
@articles = [“a”, “b”, “c”]  
render :partial =\> “live/autosearch”  
end

Partial snippet:

 \<% for article in @articles -%\> 
\<%= h article.to\_s %\>
 \<% end -%\>

CSS snippet  
.auto\_complete {  
background-color: gray;  
z-index: 100;  
}  
ul.selected { background-color: blue; }