我有一些 HTML 附加到 KendoUI Splitter 容器中,它分配了 Bootstrap css。当 HTML 在拆分器之外时,样式可以正常工作,但在拆分器内时它们会中断。
我该如何解决这个问题?
这是一个演示问题的简单 fiddle : 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 类中破坏 Bootstrap 样式的确切范围。
感谢您的宝贵时间,
问候,
斯科特
最佳答案
好的,我解决了这个问题!
k-widget 类分配以下 css:
.k-widget, .k-widget * {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
这些样式打破了表格中的填充和 Bootstrap 样式。
我在表单上使用以下 css 解决了这个问题:
.form-uiview-add_edit * {
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
这是更新后的 fiddle : http://jsfiddle.net/codeowl/YV8Jx/4/
希望这可以为其他人节省一些时间。
问候,
斯科特
关于twitter-bootstrap - Kendo UI Splitter 打破了 Bootstrap 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22858057/