Viewing Option Text (in IE7) that's Wider than the Select List
Though a "minor" cosmetic issue at times, it can be challenging to come up with creative ways to accommodate what I consider to be IE's shortcomings regarding the control of form items, in particular select lists. With at least one project I'm currently working on, I have a select list that lives in a fixed width div, yet there are times when the text values of the options are wider than the div itself. The client respectfully requested that I find a way to make the full option text display whenever the user clicks on the select list, so I of course referred to my reliable friend Google. After investing a couple of hours exploring different approaches to the challenge, I found none that I could get to meet my needs in both Firefox and IE. Oh, by the way, Firefox AUTOMATICALLY displays the full option text when you drop down without any developer intervention needed. Do you realize how much development time could be saved if IE worked the same as Firefox??? Anyway, I digress.
The solution I came up with (which I didn't find anywhere in all of my googling) was very simple: when a user clicks the select list, swap out the class to one without width restrictions. When they make a selection, swap the class back to one WITH width restrictions.
I make sure that I set my container div to a fixed width and set the overflow to 'hidden', that way when my select list suddenly grows, it doesn't force the div to widen OR overlap any adjacent divs. Without further adieux then, a simple before and after (bear in mind that if you're viewing this in Firefox, you won't see any problem with the first list; it's only BILL'S BROWSER that has the issue):
Here is the code for the samples above:
One More Note:
This solution is a little bit less than perfect in that if you click the select list and don't choose a NEW value, the class doesn't switch back until you actually blur, or click off of, the select list. I have been unable to find a solution to that one anomaly, so if anybody out there has an idea, please do share!
Hope this helps somebody.
Doug out.
The solution I came up with (which I didn't find anywhere in all of my googling) was very simple: when a user clicks the select list, swap out the class to one without width restrictions. When they make a selection, swap the class back to one WITH width restrictions.
I make sure that I set my container div to a fixed width and set the overflow to 'hidden', that way when my select list suddenly grows, it doesn't force the div to widen OR overlap any adjacent divs. Without further adieux then, a simple before and after (bear in mind that if you're viewing this in Firefox, you won't see any problem with the first list; it's only BILL'S BROWSER that has the issue):
Here is the code for the samples above:
<style>
.ctrDropDown{
width:145px;
font-size:11px;
}
.ctrDropDownClick{
font-size:11px;
width:300px;
}
.plainDropDown{
width:145px;
font-size:11px;
}
</style>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
<option value="">This is option 1.</option>
<option value="">This is the second option, a bit longer.</option>
<option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
<option value="">This is option 1.</option>
<option value="">This is the second option, a bit longer.</option>
<option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
One More Note:
This solution is a little bit less than perfect in that if you click the select list and don't choose a NEW value, the class doesn't switch back until you actually blur, or click off of, the select list. I have been unable to find a solution to that one anomaly, so if anybody out there has an idea, please do share!
Hope this helps somebody.
Doug out.
Subscription Options
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
Re: Viewing Option Text (in IE7) that's Wider than the Select List
I really prefer Firefox's handling of this. Another option is to set the title attribute of the option tag to the same option label text. On hover of the option a little pop up will show you the full label. This is also useful in Firefox because if the select list is along the right edge of a users screen, the option list will go off the screen. The title attribute however in both browsers stays on screen. One drawback is the file size of the page can be increased for a large list but the title attributes could probably be populated on load with js to reduce this issue.
Posted by Dan Roberts on May 15, 2008 at 10:06 AM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
By the way, when I said "I really prefer Firefox's handling of this" I didn't mean I disagreed with your approach. I just with IE would do the reasonable thing and switch to handling this like Firefox.
Posted by Dan Roberts on May 15, 2008 at 2:38 PM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thanks for the suggestion, Daniel! This is just the kind of thing I hoped would start coming out of the woodwork. Had I actually FOUND what you suggested BEFORE I implemented my solution, I DEFINITELY would have used it instead...much simpler, much cleaner. :)
Posted by dougboude on May 18, 2008 at 3:31 PM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thank you thank you thank you! This is exactly what I needed today. Thanks again!
Posted by slade73 on July 28, 2008 at 4:59 PM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
No problem Slade! And hey, if you come up with anything that works better, be sure to share it back here, okay? :)
Posted by dougboude on July 29, 2008 at 9:04 AM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
This seems to work in IE, when you click the dropdown and select the same value, but it is even more messy approach.
Since it requires two clicks to select a value in combo
add a global var
var inCombo = false;
if the user leaves combo without second click, reset it
onBlur="this.className='ctrDropDown'; inCombo = false"
and set the onMouseUp event, to check for the second click, even on the already selected item
onMouseUp="inCombo = !inCombo; if(inCombo) this.className='ctrDropDownClick'; else this.className='ctrDropDown';"
Since it requires two clicks to select a value in combo
add a global var
var inCombo = false;
if the user leaves combo without second click, reset it
onBlur="this.className='ctrDropDown'; inCombo = false"
and set the onMouseUp event, to check for the second click, even on the already selected item
onMouseUp="inCombo = !inCombo; if(inCombo) this.className='ctrDropDownClick'; else this.className='ctrDropDown';"
Posted by walrus on September 8, 2008 at 6:46 AM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
sup sup sup sup thnaks
Posted by nfurs dfksdjalk on December 12, 2008 at 5:28 PM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
This solution is very nice, however, in IE6 you have to click twice on the select menu to be able to see the drop down.
:(... so close. Darn IE6.
Thanks for this nice solution Doug :)
:(... so close. Darn IE6.
Thanks for this nice solution Doug :)
Posted by rzea on February 17, 2009 at 10:39 AM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thanks for the solution.
I was looking for soultion on this issue for quite some time.
Is there any way to fix double click issue in IE6?
I was looking for soultion on this issue for quite some time.
Is there any way to fix double click issue in IE6?
Posted by Veeru on May 8, 2009 at 4:35 AM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thanks a lot, saved my day. It would be very nice to have a fix for the double click issue for me too ;-)
Thanks!
Thanks!
Posted by Kevin on May 15, 2009 at 9:31 AM
Re: Viewing Option Text (in IE7) that's Wider than the Select List
works excellent, BUT:
I dynamically generate complex form and I don't know in advance how long will data in select box be. So, I switch between values "auto" (which will adjust to size of the longest text when opened) and "150px" (which visually fits to page). The problem occurs when there are only short texts - when I click the right part of select, it reduces its size (to the optimal size) and not open. It is ugly and dumb for user.
Anyone has any idea? thanks in advance.
I dynamically generate complex form and I don't know in advance how long will data in select box be. So, I switch between values "auto" (which will adjust to size of the longest text when opened) and "150px" (which visually fits to page). The problem occurs when there are only short texts - when I click the right part of select, it reduces its size (to the optimal size) and not open. It is ugly and dumb for user.
Anyone has any idea? thanks in advance.
Posted by am on August 2, 2009 at 2:49 PM