CODEWITHSUNDEEP
cssinternet-explorer-8
griegs
griegs

Reputation: 22760

Set width of Option in a Select Box

I have a dropdown list that needs to be no more than 100px wide.

However, the options within the select box needs to show at 200px.

Is there a way where the select box can be small and the options large?

At present the select box and the options are the same width;

So far I have tried various combinations of;

select.treeItem.Destination { width:130px; } 
select.treeItem.Destination option {width:auto;}

Upvotes: 1

Views: 2230

Answers (1)

ericdc
ericdc

Reputation: 11289

I think this is what you need.

This is an IE 6-8 specific issue where a little javascript can work around the problem. 

 <!--[if lt IE 9]>
 <script>
 var el;

$("select")
.each(function() {
el = $(this);
el.data("origWidth", el.outerWidth()) // IE 8 padding
})
.mouseenter(function(){
$(this).css("width", "auto");
})
.bind("blur change", function(){
el = $(this);
el.css("width", el.data("origWidth"));
});
</script>
<![endif]-->

More info on the script can be found here - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Upvotes: 1

Related Questions