今晩は~
bootstrap、selectBoxItのプラグインを入れてデザインの作業をしています。
セレクトボックスをメニューに入れたらデザインが崩れてしまいます。
セレクトボックスの本体に data-toggle='selectbox' を追加することで、<select> タグ本体をhiddenにし
span, ui, liの綺麗なセレクトボックスのデザインを見せるselectboxitというプラグインを使っています。
*ご参考ください。
selectBoxItプラグイン
プラグインのせいかメニュー側のサイズの問題か
添付のイメージのように崩れがでています。
html変換されたコードも貼り付けますので、是非見てください。
→ セレクトボックプラグインを使わないと正常に表示されました。
→ メニューでなく本文の中に入れたら正常に表示されます。
htmlコード
html
1<div> 2 <select name="select-display" data-toggle="selectbox" data-mst_ledger_id="1" class="select-display" style="display: none;"> 3 <option value="">画面選択</option> 4 <option value="1" selected="selected" data-url="/input/index.html?id=1&display_id=1">test_screen1</option> 5 <option value="5" data-url="/input/index.html?id=1&display_id=5">test_screen1-2</option> 6 <option value="6" data-url="/input/index.html?id=1&display_id=6">test_screen1-3</option> 7 </select> 8 9 <span id="" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns=""> 10 <span id="" class="selectboxit select-display selectboxit-enabled selectboxit-btn" name="select-display" tabindex="0" unselectable="on" data-toggle="selectbox" data-mst_ledger_id="1" style="width: 142px;"> 11 <span class="selectboxit-option-icon-container"> 12 <i id="" class="selectboxit-default-icon selectboxit-option-icon selectboxit-container" unselectable="on"></i> 13 </span> 14 <span id="" class="selectboxit-text" unselectable="on" data-val="1" aria-live="polite" style="max-width: 112px;">test_screen1</span> 15 <span id="" class="selectboxit-arrow-container" unselectable="on"> 16 <i id="" class="selectboxit-arrow ion-chevron-down" unselectable="on"></i> 17 </span> 18 </span> 19 20 <ul class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 142px; max-height: 35px; top: auto; display: none;" role="listbox" aria-hidden="true"> 21 <li data-id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first" role="option"> 22 <a class="selectboxit-option-anchor"> 23 <span class="selectboxit-option-icon-container"> 24 <i class="selectboxit-option-icon selectboxit-container"></i> 25 </span> 26 画面選択 27 </a> 28 </li> 29 <li data-id="1" data-val="1" data-disabled="false" class="selectboxit-option selectboxit-selected" data-url="/input/index.html?id=1&display_id=1" role="option" style="display: none;"> 30 <a class="selectboxit-option-anchor"> 31 <span class="selectboxit-option-icon-container"> 32 <i class="selectboxit-option-icon selectboxit-container"></i> 33 </span> 34 test_screen1 35 </a> 36 </li> 37 <li data-id="2" data-val="5" data-disabled="false" class="selectboxit-option" data-url="/input/index.html?id=1&display_id=5" role="option"> 38 <a class="selectboxit-option-anchor"> 39 <span class="selectboxit-option-icon-container"> 40 <i class="selectboxit-option-icon selectboxit-container"></i> 41 </span> 42 test_screen1-2 43 </a> 44 </li> 45 <li data-id="3" data-val="6" data-disabled="false" class="selectboxit-option selectboxit-option-last selectboxit-focus" data-url="/input/index.html?id=1&display_id=6" role="option" style=" 46 width: 100px; 47" data-active=""> 48 <a class="selectboxit-option-anchor"> 49 <span class="selectboxit-option-icon-container"> 50 <i class="selectboxit-option-icon selectboxit-container"></i> 51 </span> 52 test_screen1-3 53 </a> 54 </li> 55 </ul> 56 </span> 57</div>
いろいろ試していますが、なかなかできないので質問することにしました。
どうかよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。