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

Question

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

use*_*084 6 javascript css jquery twitter-bootstrap

我使用发现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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sam*_*iew 3

将其添加到您的 CSS 中：

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

Run Code Online (Sandbox Code Playgroud)

为什么这有效：

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

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

请参阅更新后的小提琴，其中 CSS 位于 CSS 框中：

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

归档时间：	13 年，3 月前
查看次数：	252 次
最近记录：	13 年，3 月前