- Sep 29, 2004
- 18,656
- 68
- 91
Many of you know about this one. IE 6 (I think 7 also) has an issue with the select element's display. If you have a select element that is 10 chars wide, it is fine. But if the select is 10 characters wide and you have choices that are 20 characters wide, the last 10 characters get chopped off.
I have a fix but it has a strange double click issue. I think it is because the resizing causes the click action to abruptly stop.
Also, if the pulldown (combobox) does not require a scrollbar to display choices, there is no issue. You can remove some of the options and it will work.
I do have IE 6 detection code. I did not include that here. This is what you get when I do see IE6.
Anyway, here is the code:
I have a fix but it has a strange double click issue. I think it is because the resizing causes the click action to abruptly stop.
Also, if the pulldown (combobox) does not require a scrollbar to display choices, there is no issue. You can remove some of the options and it will work.
I do have IE 6 detection code. I did not include that here. This is what you get when I do see IE6.
Anyway, here is the code:
Code:
<HTML><BODY>
<style type="text/css">
.narrow{
width:145px;
}
.wide{
width:300px;
}
</style>
<div style="border: thin solid black; padding: 4px; overflow: hidden; width: 200px; height: 100px;">
<select name="X" id="X" class="narrow"
onchange="this.className='wide';"
onblur="this.className='narrow';"
onmouseover="this.className='wide';"
onmousedown="this.className='wide';" >
<option>WORD</option>
<option>WORDS WORDS WORDS WORDS WORDS WORDS</option>
<option>MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE</option>
</select>
<option>WORD</option>
<option>WORDS WORDS WORDS WORDS WORDS WORDS</option>
<option>MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE</option>
</select>
<option>WORD</option>
<option>WORDS WORDS WORDS WORDS WORDS WORDS</option>
<option>MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE</option>
</select>
<option>WORD</option>
<option>WORDS WORDS WORDS WORDS WORDS WORDS</option>
<option>MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE</option>
</select>
<option>WORD</option>
<option>WORDS WORDS WORDS WORDS WORDS WORDS</option>
<option>MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE</option>
</select>
<option>WORD</option>
<option>WORDS WORDS WORDS WORDS WORDS WORDS</option>
<option>MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE MORE</option>
</select>
</div>
</body></html>
Facebook
Twitter