If you have ever had a dropdown text box that someone has added a very long option to, you will know that it can put your whole page design out. Using this method it the most easiest way. Just add it to your page and it will sort out all your select boxes in one go.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> function setSelectWidth() { var $yardstick = $('<select><option>' + $(this).val() + '</option></select>') $yardstick.css({display: 'none'}).appendTo('body'); var fudge = 1.03; // need a little more to avoid clipping for some reason $(this).width( fudge * $yardstick.width() ); $yardstick.remove(); } function initSelectors() { $('select').each(function() { setSelectWidth.apply(this); }).one('change', function() { setSelectWidth.apply(this); }); } initSelectors(); </script> |
