CODEWITHSUNDEEP
htmlcssinternet-explorer
Egy Mohammad Erdin
Egy Mohammad Erdin

Reputation: 3413

max-width in select tag is not working in IE

i have a select tag,... like this,..

<select style="max-width:150px"> 
     <option value='1'>bla bla bla bla bla bla bla ...(let's say a long words)
     ...... 
</select>

it's works in FF,.. but not ie,.. than i change max-width with width style="width:150px"
it's works in both,.. but,..
in ie... the text is truncated

anyone can help me? am i doing wrong? is there a better way to fix it?

sorry if my english bad :(

Upvotes: 3

Views: 9402

Answers (2)

Andy West
Andy West

Reputation: 12507

Here is an article that may explain why max-width doesn't work in the version of IE you're using:

max-width in Internet Explorer

It shows an example of how to simulate max-width in IE using CSS expressions:

<html>
<style>
body {
width:100%;
margin:0;
padding:0;}

p {
border:1px solid red;
max-width:800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
</style>
<body>
<p>
[a lot of text]
</p>
</body>
</html>

Disclaimer: I'm not a fan of CSS expressions, but this should work, anyway.

Upvotes: 6

thirtydot
thirtydot

Reputation: 228302

This jQuery plugin fixes the problem you're describing.

Setting the fixed width of a select element in Internet Explorer [6/7/8] will cause all of the select options that are wider than the select's set width to be cropped.

Applying this plugin makes the select element in Internet Explorer appear to work as it would work in [modern browsers].

Upvotes: 2

Related Questions