StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>It uses a bit of the YUI library and a special extension for fixing IE select boxes.</p> <p>You will need to include the following and wrap your <code><select></code> elements in a <code><span class="select-box"></code></p> <p>Put these before the body tag of your page:</p> <pre><code><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> </code></pre> <p>Post acceptance edit:</p> <p>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)</p> <p>-- amendment to the edit:<br> 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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload