3

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 :(

Andy West
  • 12,302
  • 4
  • 34
  • 52
Egy Mohammad Erdin
  • 3,402
  • 6
  • 33
  • 57
  • 1
    possible duplicate of [Dropdownlist width in IE](http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie) – BalusC Dec 15 '10 at 03:49

2 Answers2

6

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.

Andy West
  • 12,302
  • 4
  • 34
  • 52
2

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].

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 2
    Who's asking for jQuery here? ;) – Sander Dec 29 '11 at 12:10
  • @Sander: If it was possible to fix this without JavaScript, then *why would the above jQuery plugin exist*? The accepted answer also uses JavaScript (A CSS expression, [which is bad and *should* be replaced with JavaScript!!](http://code.google.com/speed/page-speed/docs/rendering.html#AvoidCSSExpressions)). If you're using JavaScript *in the slightest* you might as well be using a library such as jQuery. If you've found a pure CSS solution to this problem then please share it, and your downvote is warranted. Otherwise, you're downvoting a valid solution to this problem for no reason. – thirtydot Dec 29 '11 at 17:03
  • @Sander: Also take a look at the question linked in the comments: http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie. Surprise, surprise it's chock full of JavaScript/jQuery fixes. – thirtydot Dec 29 '11 at 17:04
  • Let me explain my downvote. The reason why I did that was because in this specific case no jQuery was asked. Andy West proposed a solution with JavaScript through CSS expressions. And that is where the big difference is: JavaScript is not jQuery. Please consider the fact that not every website on this planet is using that library. ;) (continued in the next comment) – Sander Dec 30 '11 at 07:40
  • 2
    (Continued from the previous comment) If a solution with plain JavaScript is alright, then no jQuery is needed. I'm getting a little tired of everyone thinking that jQuery contains/is the solution to anything, in the end jQuery is nothing more than a great, but also big, library to resolve cross browser issues with regards to JavaScript. So, why include an entire jQuery library just for this fix? That's my point. :) I will upvote your post again (when I can) because I appreciate your effort in thinking along, but I just don't think that jQuery should be the solution to just anything. – Sander Dec 30 '11 at 07:41