6

ここにあるfontpickerを使用しています。私はそれをモーダルの中に入れました、そしてそれはうまくいきました。ここで、モーダル内にタブナビゲーションを配置しましたが、フォントピッカーが正しく表示されません。（最初のモーダルのボタンは壊れています。2番目のモーダルのボタンは同じ例ですが、タブ付きナビゲーションはありません。）

style = "overflow-y：visible; max-height：500px;"を設定しました 両方の場合において。

私のフィドル 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>


    <script>
    $(document).ready(function(){
           $('select#fonts1').fontSelector({});
           $('select#fonts2').fontSelector({});
        });

    </script>

</head>


<body>

    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Fontpicker w/ modal and tabbed</a>
    <a href="#myModal2" role="button" class="btn" data-toggle="modal">Fontpicker w/out the tabbed navigation</a>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body" style="overflow-y:visible; max-height:500px;">

        <ul class="nav nav-tabs">
            <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        </ul>

        <div class="tab-content">
               <div id="tab1" class="tab-pane" style="overflow-y:visible; max-height:500px;">

                <select id="fonts2">
                    <option value="Chelsea Market">Chelsea Market</option>
                    <option value="Droid Serif" selected="selected">Droid Serif</option>
                    <option value="Ruluko">Ruluko</option>
                    <option value="Ruda">Ruda</option>
                    <option value="Magra">Magra</option>
                    <option value="Esteban">Esteban</option>
                    <option value="Lora">Lora</option>
                    <option value="Jura">Jura</option>
                  </select>
              </div>

        </div>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>


        <!-- Modal --> 
    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body" style="overflow-y:visible; max-height:500px;">

        <select id="fonts1">
                    <option value="Chelsea Market">Chelsea Market</option>
                    <option value="Droid Serif" selected="selected">Droid Serif</option>
                    <option value="Ruluko">Ruluko</option>
                    <option value="Ruda">Ruda</option>
                    <option value="Magra">Magra</option>
                    <option value="Esteban">Esteban</option>
                    <option value="Lora">Lora</option>
                    <option value="Jura">Jura</option>
                  </select>

    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div> 


</body>
</html>
4

2 に答える 2

3

これをCSSに追加します。

.tab-content {
    overflow: visible !important;
}

これが機能する理由：

現在、jQueryUIタブの.tab-contentオーバーフロープロパティはautoに設定されています。これは、コンテンツがダイアログからオーバーフローするのではなく、スクロールバーが使用されることを意味します。そのため、ドロップダウンメニューは非表示になります（実際に表示するには、小さなスクロールバーを使用する必要があります）。

.tab-content目的の効果を得るには、デフォルトのjQueryUIのCSSオーバーフロープロパティをautoの代わりにvisibleでオーバーライドする必要があります。

CSSボックスにCSSが含まれている、更新されたフィドルを参照してください。

http://jsfiddle.net/samliew/kTXB7/3/

于 2013-03-04T02:50:12.413 に答える
2

ここでの問題は要素overflow:autoに設定されてい.tab-contentます。

そのオーバーフローを削除すると、正常に動作します。ただし、注意してください。このプロパティは、モーダルのコンテンツが多すぎる場合に垂直スクロールバーを有効にするため、表示内容に応じて使用してください。

于 2013-03-04T02:53:59.837 に答える