このサイトのスクリプトjQueryカスタムselectboxes(現在のバージョン:0.6.1)を使用しています:
http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
私の問題は、クラス「jquery-selectbox-listjquery-custom-selectboxes-replaced-list」の幅と高さがinline-style-assignmentによって設定されていることです。
私の元のコードは次のようになります。
<span class="anrede">
Anrede<br />
<select name="anrede" id="anrede" value="[[!+fi.anrede]]" >
<option value="select"></option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</span>
Firebugのサイトのソースコードを見ると、コードは次のように変更されています。
<span class="anrede">
Anrede
<br>
<div class="jquery-selectbox jquery-custom-selectboxes-replaced" style="width: 125px;">
<div class="jquery-selectbox-moreButton"></div>
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list" style="width: 120px; height: 3em; display: none;">
<span class="jquery-selectbox-item value-select item-0"></span>
<span class="jquery-selectbox-item value-Frau item-1">Frau</span>
<span class="jquery-selectbox-item value-Herr item-2">Herr</span>
</div>
<span class="jquery-selectbox-currentItem"></span>
<select id="anrede" value="" name="anrede" style="display: none;">
<option value="select"></option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</div>
</span>
私の問題は3番目のdivクラスです:
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list" style="width: 120px; height: 3em; display: none;">
ご覧のとおり、インラインスタイルの割り当てが原因で、レイアウトの問題が発生します。誰かがこれを解決する方法を知っていますか?
よろしくお願いします!