Jump to content

size/width problem of select drop down in IE


hammadtariq

Recommended Posts

Hello,

      I am having cross browser usability issue with select drop downs, you know in firefox if there is any option which is quiet long, firefox will automatically adjust the drop down width with the option of highest width, while in IE, it remains as much as you tell it to remain using width style property. I want the IE to behave like firefox too, that forexample, select drop down stays for about 100px width but on click, there shouldn't be any text cut-out behind scroll bar. Is there any javascript solution for it?

 

Thanks

Sorry it is a problem with YUI (Yahoo User Interface) library. I made a test page without using YUI and now the drop down is not cutting the text but extending the drop down width the to the highest width option. I want it just to look like as it works in Fire Fox.

 

Here is the test page:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">

<body>
<h1>Enhancing the select element</h1>

<form action="#">
	<select class="turnintodropdown" name="test" id="test">
		<option value="56">56K dial-up</option>
		<option value="isdn">ISDN dial-up56K dial-up56K dial-up56K dial-updial-up56K dial-updial-up56K dial-updial-up56K dial-updial-up56K dial-updial-up56K dial-up</option>

		<option value="DSL">DSL</option>
		<option value="cable">Cable Modem</option>
		<option value="T1">T1</option>
	</select>
</p>
<p>
	<label for="media">Media</label>

	<select class="turnintodropdown" name="media" id="media">
		<option value="cd">CD</option>
		<option value="vinyl">vinyl</option>
		<option value="dvd">DVD</option>
		<option value="vcd">Video CD</option>
	</select>
</p>

<p><input type="submit" value="send" /></p>
</form>
</body>
</html>

 

If you view this example in firefox and IE, you will get to know what I am asking for.

 

Any ideas?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.