3

我有一些要附加到 KendoUI 拆分器容器的 HTML，它分配了引导 css。当 HTML 位于拆分器之外时，样式可以正常工作，但在拆分器内部时它们会中断。

我该如何解决这个问题？

这是一个演示该问题的简单小提琴：http: //jsfiddle.net/codeowl/9Ag3X/17/

这是代码：

<div class="spacer"></div>

<div id="StandardDiv">    
</div>

<div class="spacer"></div>

<div id="splitter" 
    data-role="splitter"
    data-panes="[
        { collapsible: false, size: '30px' },
        { collapsible: false }
    ]">
    <div id="LeftPane"></div>
    <div id="RightPane"></div>    
</div>


<script id="TestTemplate">
    <div class="panel panel-default">
        <div class="panel-heading ma-panel-heading">Edit User Details:</div>
        <div class="panel-body">
            <table class="form-uiview-add_edit">
                <tr>
                    <td>
                        <label >Username:</label>
                        <input type="text" class="form-control"  />
                    </td>
                    <td>
                        <label >Password:</label>
                        <input type="password" class="form-control"  />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label >First Name:</label>
                        <input type="text" class="form-control" />
                    </td>
                    <td>
                        <label >Last Name:</label>
                        <input type="text" class="form-control" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label >Email:</label>
                        <input type="text" class="form-control" />
                    </td>
                    <td>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="1" />
                                Account is Active
                            </label>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="pull-right">
                <button class="btn btn-default" >
                    Cancel
                </button> 
                <button class="btn btn-default" >
                    Save
                </button>
            </div>
        </div>
    </div>   
</script>

这是Javascript：

$(document).ready(function() {
    var eTestTemplate = $('#TestTemplate');
    $('#StandardDiv').append(eTestTemplate.html());
    kendo.bind($('#splitter'), {});
    $('#RightPane').append(eTestTemplate.html());
});

这是CSS：

table.form-uiview-add_edit {
    width:100%;
}
.form-uiview-add_edit td {
    padding:5px;
}
.spacer {
    height:20px;
}

使用 Chrome 开发人员工具，我发现一旦渲染拆分器面板 div 就会被分配 k-widget 类。如果我在开发工具中编辑 div 并删除 k-widget 类，则表单将按原样显示，表格单元格中的 5px 填充在文本输入之间放置空间。

但是我还没有确切地缩小 k-widget 类中破坏引导程序样式的范围。

感谢您的时间，

问候，

斯科特

4

1 回答 1

8

好的，我解决了问题！

k-widget 类分配以下 css：

.k-widget, .k-widget * {
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

这些样式打破了表格中的填充和引导样式。

我在表单上使用以下 css 解决了这个问题：

.form-uiview-add_edit * {
    -moz-box-sizing: border-box !important; 
    -webkit-box-sizing: border-box !important; 
    box-sizing: border-box !important;
}

这是更新的小提琴：http: //jsfiddle.net/codeowl/YV8Jx/4/

希望这可以节省其他人一些时间。

问候，

斯科特

于 2014-04-05T03:26:30.967 回答