6

我正在使用此处找到的字体选择器。我把它放在一个模态里，它工作得很好。现在，我已将选项卡导航放在模态框内，并且字体选择器无法正确显示。（第一个模式的按钮是损坏的。第二个模式的按钮是同一件事的一个例子，但没有选项卡式导航。）

我设置了 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;
}

为什么这样有效：

目前，jQuery UI 选项卡.tab-content溢出属性设置为自动。这意味着将使用滚动条而不是让内容溢出对话框，这就是为什么下拉菜单从视图中隐藏的原因（您必须使用微小的滚动条才能真正看到它）。

您需要.tab-content用可见代替自动覆盖默认的 jQuery UI 的 CSS 溢出属性，以获得所需的效果。

查看更新的小提琴，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 回答