CSS Select Options IE Cut Off
So I’ve been working for the last couple of days on a bug at work that is an IE specific bug but may actually help with other browsers in different circumstances. I’m surprised I haven’t run into this bug sooner than I had. I first read a great article on css-tricks.com that I borrowed the screenshot from to illustrate the issue. Their method was good but not exactly what I was looking for. So I decided to come up with my own code.
Select Problem with IE
Most of you probably ran into this article because you are half bald trying to figure out how to make your select box options show their full text in Internet Explorer when the select option has a static size set. Like the figure above illustrates, looks simple to fix but holy cow did it take a lot of research to figure out the best way to do it. After hours of research, I found out that I can’t do it with CSS alone. Many solutions I saw out there used Javascript and injected CSS in the Javascript. I’m not a big fan of CSS in Javascript. I’d rather have my CSS separate and change the way something looks in the stylesheet. For that reason I find myself using jQuery’s addClass, removeClass, toggleClass, and toggle quite often. That is what this code is going to do for you. I don’t think this is the best way for everyone, but it is the best way for me.
I’m not a programmer per say so I stick to the different code libraries. I am a jQuery man so my code requires jQuery. So Here is my code and I’ll explain after you see it.
$(function() {
$('select').focus(function(){
$(this).addClass('ie_select');
});
$('select').blur(function(){
$(this).removeClass('ie_select');
});
});
Place that code in the head of your document wrapped in a script tag or however you like to call your Javascript and create a specific CSS class called .ie_select in your stylesheet and style it according to what you need it to do. If you only want to apply the Javascript to specific browsers, you’ll need to add some conditional statements to your code.
It’s fairly straight forward code. This is what is going on:
- When a select item has focus, add the CSS class of .ie_select to the select item.
- When a select item loses focus or blurs, remove the CSS class of .ie_select from the select item.
I’ve found this code is much more readable to someone like myself who dabbles in jQuery when it comes to presentational use of it. That is exactly what the purpose of this code is, to fix presentation.
FYI
For what I was doing I had to add position: absolute to my CSS for .ie_select to get things to display the way I needed. A majority of the tutorials out there did nothing more than change from a fixed width on the select to a width: auto and that seemed to be all they needed. My layout was a bit more complicated and that didn’t work for me. This code will not style your select element for you, but it will enable you to be able to style it the way you need things styled.
About Brandon Buttars
You might wanna apply this code to IE only:
if($.browser.msie){
$(‘select’).focus(function(){
$(this).addClass(‘ie-select’);
}).blur(function(){
$(this).removeClass(‘ie-select’);
});
}
Thanks Jeroen. I’ve used your modification now and it makes life even easier. Here’s the whole code I used:
$(function(){if($.browser.msie){
$('select').focus(function(){
$(this).parent().parent().addClass('ie_select');
});
$('select').blur(function(){
$(this).parent().parent().removeClass('ie_select');
});
}
});
I found that in IE8 Select closes if I use focus or click events for resize and absolute positioning.
And user have to click it again to view options.
I replaced focus event to mousedown to avoid this.
Thanks for the heads up on the IE8 problem.
Do you mind if I link to your article (http://www.lhessellund.dk/facts/blogs-you-have-to-read/)? I am about to make a list of interesting blogs for my readers. Regards L.Hessellund
Fine by me.