jQuery.selecteSizer - a fix for IE cutting off select dropdowns
jQuery October 23rd, 2008You may have seen this before…you have select dropdowns that are set to a certain width in accordance to the design. Anyone using IE will click the dropdown, and if any of the option items are wider than the select element’s width, they’re cutoff. This can be extremely hindering where you have a select dropdown of products or resources that all begin with the same ~20 characters. Some people just want to see the full option, too.
I’ve only found one, semi-elegant solution, and that is resizing the select container to “width:auto” on the focus event, and setting it back to its original size on the blur (unfocus) event. You also need to toggle the position to absolute and set its position so it shows up in the correct spot.
I created jQuery.selecteSizer to do this automatically on all specified selects.
Example Usage
if(j.browser.msie){
j("select").selecteSizer();
}
July 29th, 2009 at 7:54 pm
I love your extension and am using it extensively in a site where the contents of certain selects are filled dynamically and can vary in length quite dramatically. Your extension is the best solution I’ve found so far for IE. However, my users do complain about how they’re forced to click on each select twice: once to expand it to its full width, and once again to actually make the list of options drop down. Have you looked at modifying your extension to eliminate that 2nd click? I tried a few things with your source code but had no luck. Thanks!
November 3rd, 2009 at 12:22 pm
Drewta, unfortunately you can’t force the select element to expand. The reason the 2nd click is required is because the select is positioned absolutely when it gains focus, which triggers the collapse. They may have to click it twice, but at least they can see the text ;P…
I do know of one sure-fire way to eliminate the second click - get those users on Firefox!!!! Promote, promote, promote!
February 2nd, 2010 at 5:10 am
Strangely enough, I’m testing on FF3.0 and I’m getting the, “have to click twice bug”, MOST of the time. I’m using a single select element for multiple widgets and absolutely moving it into place on MouseOver… When the list box moves, it must be clicked twice to open the items. Also, after an item is selected, I set the index back to zero, and then I usually have to click twice to access the items then as well.
Ideas?
I’m using GWT and gwt-query {jquery clone}.
February 2nd, 2010 at 5:17 am
Bah! I’m silly.
I was re-attaching the list box every time I moved it, instead of just repositioning it to -x,-y to hide it. This was probably GWT-related, since it sinks event listeners and junk every time an element is added.
Just thought I’d add this here in case someone Googles in similar style to myself and can squash their bugs in a few less seconds…