[JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth
Post on:2010年7月2日
sponsors
IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。
Internet Explorer Select Width Bug Workaround
デモページ
対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ（Firefox, Chrome, Safari, Opera）と同様に省略されずに表示されるようになります。
※IE6には別途bgiframe Pluginが必要です。
スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。
設置は簡単で、既存のフォームにも簡単に適用できます。
jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="js" cols="60" rows="5"> <script type="text/javascript"> $(function (){ $('select#fixed-select-css').ieSelectWidth ({ containerClassName : 'select-container', overlayClassName : 'select-overlay' }); }); </script> </textarea> |
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <select name="fixed-select-css" id="fixed-select-css"> <option value="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet euismod metus?</option> <option value="b">Etiam ultrices sollicitudin justo, egestas adipiscing magna laoreet ut.</option> <option value="c">In sit amet euismod metus? In dignissim eros id nisi dignissim volutpat. </option> </select> </textarea> |
sponsors
