Help with auto_complete css

Rails
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

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

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

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

6

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” [email protected] 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

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:

<%= 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; }