Question

我正在使用找到here的fontpicker。我把它放在一个模态中，它工作正常。现在，我已将标签导航放在模态中，并且fontpicker无法正常显示。（第一个模态的按钮是坏的。第二个模态的按钮是一个相同的例子，但没有标签导航。）

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

Answer 1

将此添加到您的CSS：

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

为什么会这样：

目前，jQuery UI标签.tab-content溢出属性设置为auto。这意味着将使用滚动条而不是允许内容溢出对话框，这就是下拉菜单从视图中隐藏的原因（你必须使用微小的滚动条实际看到它）。

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

使用CSS框中的CSS查看更新的小提琴：

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

Answer 2

此处的问题是在overflow:auto元素上设置了.tab-content。

删除溢出，它将正常工作。但请注意 - 当某个模态的内容太多时，该属性会启用垂直滚动条，因此只需根据您在其中显示的内容使用它。

如何让这个fontpicker在带有选项卡的引导模式中正确显示

2 个答案: