I have a drop down select box (Views exposed filter) in a sidebar that's only 180px wide (3 units of a 16 section grid). The basic select box looks fine in Firefox, but of course not so good in IE as it extends beyond the limit of the sidebar div. Tried fixing it with max-width and width in CSS, but what works for IE7 fails in IE8 and vice versa. Plus even if you are able to contain the basic box, if any of the select options in the drop down are really long, the extended drop down cannot accommodate the length - it's constrained by the basic closed box width and the options are cut off.

After reading a lot, it seems it's impossible to fix this in pure CSS, so I happened on a jQuery fix. It only seems to work partially - it allows the drop down to expand as necessary, but I can't seem to control the width of the basic unopened box, yet many people swear it works, and their demo site looks fine.

Here's the link to the script page: http://www.jainaewen.com/files/javascript/jquery/ie-select-width/
An expanded version of this script by the same author additionally allows for custom styling, and is listed on the jQuery site here: http://plugins.jquery.com/project/ie-select-style

Can someone comment on this issue, and suggest reasons why this jQuery script isn't working in Acquia Marina? I think it's a CSS conflict of some kind. It looks like a competent script, though there are others out there.

Comments

jeremycaldwell’s picture

jeremycaldwell commented

Hi there, rather than using Javascript for this I recommend revisiting the idea of writing some CSS to change the width of the select lists. Your theme includes IE8, IE7, and IE6 specific CSS files with fixes for those browsers.

You can add your custom width for the select box to these CSS files as needed. The only thing to keep in mind is that when you update your theme to a newer version just be sure to back up those IE specific CSS changes and re-add them when the update is complete.

druplicate’s picture

druplicate commented

The general consensus on the net is you can't fix this problem in CSS because you can't independently control the width of the closed box and the drop down width in IE6 and IE7. Quote: "Setting the fixed width of a
element in Internet Explorer will cause all of the select options that are wider than the select's set width to be cropped." - from here: http://www.jainaewen.com/files/javascript/jquery/ie-select-width/

In Firefox, Opera, Safari, or Chrome, using width, or max-width controls the width of the closed box and the drop down width expands to accommodate the widest option, but not so in IE. This is generally not a problem unless you have the drop down in a narrow div like my 180px sidebar.

Here is a good illustration of the problem, and a jQuery solution that is a lot simpler though I haven't tried it yet: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Closed (won't fix)

Ah, thanks for the explanation. Well from looking at the code it should work when applied to your theme.

I updated their script to something I think would work on your site. Be sure to replace the classes targeted in this script with the classes on your site so it applies to the correct elements.

Drupal.behaviors.acquia_marinaRoundedCorner = function (context) {
  $(".ProductAttributesSelect")
    .mouseover(function(){
  $(this)
    .data("origWidth", $(this).css("width"))
    .css("width", "auto");
  })
  .mouseout(function(){
    $(this).css("width", $(this).data("origWidth"));
  });
};

Good luck!

druplicate’s picture

druplicate commented
Status: Closed (won't fix) » Active

Thanks!

Unfortunately that script only partially worked - option list collapses while trying to select an item, I guess because the mouse pointer is no longer over the closed box. Also tried using 'mouseenter' and 'mouseleave', as well as 'focus' and 'blur', which worked the best, but still not perfect. The box doesn't return to original width unless you click on a blank area outside the box and doesn't open without two clicks. I'll play with it to see if I can refine it some.

The other script is far more complicated and a bit difficult for me to analyze. If anyone can take a look at it to adapt it to the Acquia Marina theme, it would benefit anyone with this problem.

goody815’s picture

goody815 commented
Status: Active » Closed (won't fix)

i'm closing this as no one has been able to add anything since Eternalistic's #3 in Dec 2010

2dareis2do’s picture

2dareis2do commented

I had this problem of select boxes collapsing in ie 7/8 before they were selected. Turns out to be an issue with ie 9 and actually select boxes work fine when using the native browser.