Categories
Contact Doug!
Learn About Doug!
View Doug Boude's online resume
updated 11/18/2009

View Doug Boude's profile on LinkedIn
Link to me!

Follow Doug Boude on Twitter
Follow me!

Be Doug's friend on Facebook
Befriend me!
(I promise not to follow you home)
OO Lexicon
Chat with Doug!
Recent Entries
You may also be interested in...
Web Hosting

<< July, 2014 >>
SMTWTFS
12345
6789101112
13141516171819
20212223242526
2728293031
Search Blog

Recent Comments
Re: Equivalent of SQL "TOP X" in Oracle (by Mark Foster at 7/07 4:04 PM)
Re: SQL Forward Engineering with Visio 2003 Professional (by Thomas at 6/26 4:41 AM)
Re: One Shot Query to Recalculate Orderby Field - MySQL (by gary at 6/17 6:46 PM)
Re: DON'T GET SICK IN ARKANSAS! (by r. wood at 5/25 12:00 AM)
Re: SQL Forward Engineering with Visio 2003 Professional (by Andrew at 4/30 6:14 AM)
Re: Basic Ajax Select List Filter in PHP (by good at 2/04 5:26 AM)
Re: Family Law: The Weapon of Choice for Woman Scorned (by swalker at 2/03 2:15 AM)
Re: Approaches to Building Strings: The Imploding Array (by bantal silikon at 2/01 9:44 PM)
Re: Disappearing IE Popup Window During Save/Open Dialog (by AddisonDean at 1/15 9:59 AM)
Re: My Top 20 Life Lessons for Boys and Young Men (by Alex at 1/13 8:45 PM)
Re: Array Loop Modifications in CFSCRIPT (by Alex at 11/25 11:18 AM)
Re: Array Loop Modifications in CFSCRIPT (by Abram at 11/14 11:32 PM)
Re: Recursive Functions in ColdFusion (by Dwayne at 10/25 3:47 PM)
Re: Porting Coldfusion Code to Mura (by dh at 10/16 10:14 AM)
Re: Viewing Option Text (in IE7) that's Wider than the Select List (by Devil May Cry at 9/26 1:38 AM)
Re: Why I Hate ORMs (a solicited rant) (by guideX at 9/12 11:38 PM)
Re: Recursive Functions in ColdFusion (by KP at 8/08 7:13 PM)
Re: American Airlines, YOU SUCK! (by Alison at 7/23 4:48 PM)
Re: SQL Forward Engineering with Visio 2003 Professional (by Harshad at 7/11 9:17 AM)
Re: Disappearing IE Popup Window During Save/Open Dialog (by LZ at 4/20 7:58 AM)
Archives
Photo Albums
Funnies (5)
Family (3)
RSS

Powered by
BlogCFM v1.11

14 May 2008
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):

I am the problem select list:




I am the better select list:



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.



Posted by dougboude at 11:31 AM | PRINT THIS POST! |Link | 30 comments
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';"
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 :)
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?
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!
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.
Posted by am on August 2, 2009 at 2:49 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
hey thanks for the idea..
nice one.
Posted by nikhil on March 10, 2010 at 8:31 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Hi...
I was stuck up with this Ie problem. I copied the script into a new js file and included the class in the select box. But, it did not work. Can you please help me out of this situation...

Bye,
Sai.
Posted by sai on April 21, 2010 at 4:52 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thanks for investigating and then posting your conclusions, it's a big help to the development world :) What a mess this is! How could IE think that restricting the width of the options is a usable feature at all? I could understand them having some creative differences at the heart of some of their issues but this is just plain wrong.

It seems like the best solution would be to replace default select boxes - which have always had trouble in IE all the way back to z-indexing - with custom select box widgets. Your solution looks like a good second place option for those who can't do that, though. Again, thanks for identifying and publishing the issue!
Posted by Matt Pileggi on May 19, 2010 at 3:38 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Great use of overflow:hidden !

I would never imagine, that it would only apply to the actual select control and not to the drop-down list. I was looking for a solution for a long time. My client complained about the cut-off issue, and in the same time did not accept any changes to the UI layout. Nor did they accept temporary "jumpy" UI, when the drop-down control is re-sized on mouse hover.

I went as far as researching custom widgets to do the job, but I wasn't happy with any of them.

Thanks to this tip, I came up with the following jQuery solution:

function selectDropDownIEbehavior() {

// Apply this behavior for IE only
if (!$.browser.msie)
return;

var expand = function()
{
var width = $(this).css("width");
// Don't overwrite the stored original width,
// if the event occurs for a second time before contract()
if (width == "auto")
return;

$(this)
.data("origWidth", width)
.css("width", "auto")
};

var contract = function()
{
var width = $(this).css("width");
// Don't perform this twice
if (width != "auto")
return;

var origWidth = $(this).data("origWidth");
// If the original width was not stored, abort
if (origWidth === undefined)
return;

$(this)
.css("width", origWidth)
.data("origWidth", width);
};

$("select").each(function(index) {

// The select needs to be enclosed in a container with the same CSS width,
// which uses overflow:hidden, in order to hide the expanded part
var width = $(this).css("width");
var span = '';
$(this).wrap(span);

// Add event listeners
$(this)
.mousedown(expand)
.blur(contract)
.change(contract);

});

}



All I do is import the .js file containing the above function and call the following script in my document, which applies the fix to all select boxes when the document is ready:


jQuery(document).ready(selectDropDownIEbehavior);
Posted by Paul K. on May 28, 2010 at 7:52 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Oops, looks like it stripped the html line from the script.

replace

var span = ";

with

var span = 'span style="padding: 2px; width:'+width+'; overflow:hidden; float:left;"';

and make the line in single quotes valid html by inserting "<" before "span" and "/>" after "left;""
Posted by Paul K. on May 28, 2010 at 7:59 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thank you, well done.
Posted by ohotaluy on May 31, 2010 at 10:49 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thanks Paul! Code works nicely, and saves me from pulling out ALL of my hair :-) Awesome job.
Posted by IncrediBody.com on June 9, 2010 at 12:43 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
this example supports for all hack browsers. including ie8,ie7..




.ctrDropDown
{
width: 555px;
border: 1px solid red;
}
.ctrDropDownClick{
width:555px;
}



>
Volvo
Saab
Mercedes
Audi
Posted by Nithin Chacko Ninan on September 7, 2010 at 1:33 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
this helps a lot.Thanks for the post.
Posted by Nithin Chacko Ninan on September 7, 2010 at 1:34 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
great stuff thanks!
Posted by Todd on February 18, 2011 at 12:50 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
I tried putting the above mentioned fix in my jspx page.I am using JSF icefaces ,it seems it does not work .Looks like when I set
onblur="this.className='ctrDropDown';"
onmousedown="this.className='ctrDropDownClick';"
onchange="this.className='ctrDropDown';"
for the selectOneMenu dropdown ,these styles do not get switched ...also it seems the className does not get dynamically updated based on the even as I see no chnage in the dropdown width when I click on the menu or hover over it.

Using simple html select works but since I am using JFaces I think I cannot replace the JSF dropdown with an html select.Please suggest how can I resolve this? I tried many other ways too but they had their own shorcomings which did not let me proceed further and now I am stuck on this because I cant implement it with JSF selectOneMenu component :((
Posted by kt on December 8, 2011 at 3:47 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Awesome... Loved it..
Posted by ranjit sachin on December 20, 2011 at 6:22 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Its a great solution but doesn't work if the number of options in the drop box is a lot and a scrollbar is added.. Any fix for that??
Posted by Ag on March 22, 2012 at 4:01 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
The only issue with your solution was that all browsers were affected so I used a conditional statement and swapped the Javascript for CSS. It seems (so far) to work fine:

[!--[if IE]]
[div class="iefix nooverflow"/]
[![endif]--]

[select ...]

[!--[if IE]]
[/ div>
[![endif]--]


and my CSS is

.iefix select:active, .iefix select:focus {
width:auto!important;
}
.nooverflow {
overflow:hidden;
}
Posted by cormac on April 18, 2012 at 4:18 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Doug and Paul K

-thank you for this great approach. I took what you guys did and simplified it a bit for my needs. KUDOS!

Would there be a way to have the dropdownlist get cut off from the left instead of the right? So we don't 'lose' the dropdown button arrow?
Posted by Nick Wilcox on June 21, 2012 at 10:26 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
This is an amazing solution! Great Job!
Posted by Adam Oakley on July 30, 2012 at 3:04 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thank you so much for this select box trick - this is exactly what we needed!

Very well done sir, very well done!
Posted by Chris Johnson on August 3, 2012 at 10:08 AM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Thank thank you. Exactly what I needed..

Jquerified

//add class to select menu's on load

$("select").addClass('ctrDropDown');


$("select")

.bind('mousedown', function() {
$(this).addClass('ctrDropDownClick');
$(this).removeClass('ctrDropDown');

})

.bind('focus', function() {
$(this).addClass('ctrDropDownClick');
$(this).removeClass('ctrDropDown');
})

.bind('focusout', function() {
$(this).addClass('ctrDropDown');
$(this).removeClass('ctrDropDownClick');
})

.bind('blur change', function() {
$(this).addClass('ctrDropDown');
$(this).removeClass('ctrDropDownClick');
});
Posted by Chenelle S on October 4, 2012 at 12:53 PM

Re: Viewing Option Text (in IE7) that's Wider than the Select List
Stumbled upon this link....idea is similar but the jquery way...its simple to implement too...check this out...

http://jquerybyexample.blogspot.com/2012/05/fix-for-ie-select-dropdown-with-fixed.html
Posted by Devil May Cry on September 26, 2013 at 1:38 AM

Name:   Required
Email:   Required your email address will not be publicly displayed.

Want to receive notifications when new comments are added? Login/Register for an account.

Time to take the Turing Test!!!

Fifteen plus Zero equals
Type in the answer to the question you see above:

Your comment:

Sorry, no HTML allowed!