help with auto_complete css

rubyonrails-talk
1

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

2

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

3

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

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

"Dave" wrote:

4

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

5

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

-- Long

"Dave" wrote:

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

> 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

6

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

7

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

8

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: <div class="formField">   <!--%= token_tag method = get below fixed authenticity problem %-->   <%= text_field_with_auto_complete :article, :contains, { :size => 15 }, :skip_style => true, :method => :get -%> </div>

Controller snippet: def auto_complete_for_article_contains   @articles = ["a", "b", "c" ]   render :partial => "live/autosearch" end

Partial snippet: <ul>   <% for article in @articles -%>       <ul class="autocomplete_item"><%= h article.to_s %></ul>   <% end -%> </ul>

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