Question

我尝试在对话框页面中包含带有导航栏的页脚，但是，导航栏比对话框窗口更大。我确实尝试只包含没有data-role =＆＃34;页脚＆＃34;的导航栏。但是也在做同样的事情。看起来对话框内的导航栏并不固有对话框父级的css属性。这是代码。

<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
    <div role="dialog">
        <div data-role="header" role="banner">
            <h1>Add course</h1>
        </div>
        <div class="ui-content">
             <div class="ui-field-contain">
                <label for="add-course">New course</label>
                <input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="">
            </div>
        </div>

        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="delete">Cancel</a></li>
                <li><a href="#" data-icon="check">Save</a></li>             
            </ul>
        </div>
    </div>

任何有吸烟的人？

Answer 1

设置宽度时，似乎不考虑导航按钮上的边框。你可以用一点CSS修复它

<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
    <div data-role="header" role="banner">
        <h1>Add course</h1>
    </div>
    <div role="main" class="ui-content">
        <div class="ui-field-contain">
            <label for="add-course">New course</label>
            <input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="" />
        </div>
    </div>
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="delete">Cancel</a></li>
            <li><a href="#" data-icon="check">Save</a></li>             
        </ul>
    </div>
</div>

.ui-dialog-contain .ui-navbar  {
    padding-right: 4px;
    border-bottom-left-radius: 0.3125em;
    border-bottom-right-radius: 0.3125em;
}

正在使用 DEMO

Answer 2

我确实找到了解决此问题的另一种方法。我刚刚添加了一个溢出：隐藏到data-role =“navbar”

            <!-- Dialog Add Course Footer -->
            <div data-role="navbar" style="overflow:hidden;">
                <ul>
                    <li><a href="#" data-icon="delete">Cancel</a></li>
                    <li><a href="#" data-icon="ui-icon-fa ui-icon-fa-save">Save</a></li>                
                </ul>
            </div>
            <!-- End Dialog Add Course Footer -->

如何在对话框页面jquery mobile中安装导航栏？

2 个答案: