Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The jquery BalusC's solution improved by me. Used also: Brad Robertson's <a href="http://doctype.com/ie7-width-overrides-minwidth-select" rel="nofollow">comment here</a>.</p> <p>Just put this in a .js, use the wide class for your desired combos and don't forge to give it an Id. Call the function in the onload (or documentReady or whatever).<br/> As simple ass that :)<br/> It will use the width that you defined for the combo as minimun length.</p> <pre class="lang-js prettyprint-override"><code>function fixIeCombos() { if ($.browser.msie &amp;&amp; $.browser.version &lt; 9) { var style = $('&lt;style&gt;select.expand { width: auto; }&lt;/style&gt;'); $('html &gt; head').append(style); var defaultWidth = "200"; // get predefined combo's widths. var widths = new Array(); $('select.wide').each(function() { var width = $(this).width(); if (!width) { width = defaultWidth; } widths[$(this).attr('id')] = width; }); $('select.wide') .bind('focus mouseover', function() { // We're going to do the expansion only if the resultant size is bigger // than the original size of the combo. // In order to find out the resultant size, we first clon the combo as // a hidden element, add to the dom, and then test the width. var originalWidth = widths[$(this).attr('id')]; var $selectClone = $(this).clone(); $selectClone.addClass('expand').hide(); $(this).after( $selectClone ); var expandedWidth = $selectClone.width() $selectClone.remove(); if (expandedWidth &gt; originalWidth) { $(this).addClass('expand').removeClass('clicked'); } }) .bind('click', function() { $(this).toggleClass('clicked'); }) .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); } }) .bind('blur', function() { $(this).removeClass('expand clicked'); }) } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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