Friday, March 6, 2009

Dropdownlist width in IE

DEMO


In IE, the dropdown-list takes the same width as the dropbox (i hope i am making sense) whereas in Firefox the dropdown-list's width varies according to the content.

This basically means that i have to make sure that the dropbox has to be wide enough to display the longest selection possible. this makes my page look very ugly :(

Is there any workaround for this problem? How can i uses CSS to set different widths for dropbox and the dropdownlist?




Creating your own drop down list is more of a pain than it's worth. You can use some javascript to make the IE drop down work.

Check out this solution here: http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/ie-select-width-fix.js

It uses a bit of the YUI library and a special extension for fixing IE select boxes.

You will need to include the following and wrap your elements in a

Put these before the body tag of your page:


<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
script>
<script src="ie-select-width-fix.js" type="text/javascript">
script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
script>


Creating your own drop down list is more of a pain than it's worth. You can use some javascript to make the IE drop down work.

Check out this solution here: http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/ie-select-width-fix.js

It uses a bit of the YUI library and a special extension for fixing IE select boxes.

You will need to include the following and wrap your elements in a

Put these before the body tag of your page:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
script>
<script src="ie-select-width-fix.js" type="text/javascript">
script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
script>

Post acceptance edit:

You can also do this without the YUI library and Hack control. All you really need to do is put an onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (or whatever you want) on the select element. The YUI control gives it that nice animation but it's not necessary. This task can also be accomplished with jquery and other libraries (although, I haven't found explicit documentation for this)

-- amendment to the edit: IE has a problem with the onmouseout for select controls (it doesn't consider mouseover on options being a mouseover on the select). This makes using a mouseout very tricky. The first solution is the best I've found so far.

6 comments:

Anonymous said...

instead of onmouseout, try onblur

Anonymous said...

Hey there are using Wordpress for your site platform?
I'm new to the blog world but I'm trying to get started and create
my own. Do you need any html coding knowledge to make your own blog?
Any help would be greatly appreciated!

Also visit my webpage; armitron watches for women

Anonymous said...

Thanκѕ for every othеr infοrmаtіve website.
Where еlse may just I get that kind of info wrіtten in such a pеrfеct mеthod?
I've a undertaking that I'm simply now operаting on, and I've been at the look out for such info.

Feel free to visit my blog post; juicing for better skin

Anonymous said...

Eveгу weekend i used to go to seе this site,
foг the reason that i ωant enjoyment, for the гeason that thiѕ thіs
websitе соnatiοns truly nice funny stuff too.


Alsо visit my pаgе; juicing for beauty

Anonymous said...

Thanks for finally talking about > "Dropdownlist width in IE" < Loved it!

My web page vacations and teeth
whitening

Anonymous said...

Asking questions are actually fastidious thing if you are
not understanding anything totally, however this piece of writing provides fastidious
understanding even.

Feel free to visit my homepage; ottawa companies