Prototype Rails3 Autocomplete not displaying properly in IE8

In my rails3 project, I had to implement a simple text field, a div and a autocomplete helper in my view file. auto complete works well in all browsers except IE. the div element in which the results fall in keeps changing its style attribute. here is the code.

            .. #form related other code
            <%= text_field_tag('location') %>
            <div id="location_auto_complete" class="auto_complete"> </div>
        <%= auto_complete_field('location', :url => locations_path(), :indicator => 'locations_indicator', :select => 'value') %>

it works perfect in all browsers. but in IE, the auto suggestions box dislocates itself to some other part in the page. style attribute is added dynamically to that div element everytime there is a response from server.

I am using the latest fork of rails autocomplete plugin https://github.com/fidel/auto_complete . Please help, I am stuck wit开发者_运维百科h this problem for hours.

I ran into this same problem. Apparently it is a problem with Prototype's getOffsetParent function and IE8:

https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket-618-9

Pretty embarrassing for Prototype actually that this still hasn't been fixed since that thread is from March 2009.

Anyway, as someone in that thread mentions, you can edit your prototype.js file and change the first line of getOffsetParent to this:

  getOffsetParent: function(element) {
    if (element.offsetParent && Element.visible(element)) return $(element.offsetParent);
  ...

The && Element.visible(element) is the new part. This fixed it for me. Make sure to do a hard refresh (shift-reload) in IE8 so it picks up the new JS after your changes.