我将一些HTML追加到KendoUI Splitter容器中,并为其分配了bootstrap 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类。如果我在dev工具中编辑div并删除k-widget类,则窗体将按预期显示,表格单元格中的5px填充在文本输入之间放置空格。
但是我还没有完全缩小k-widget类中破坏引导程序样式的范围。
感谢您的时间,
问候,
史考特
好的,我解决了这个问题!
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/
希望这可以节省其他人的时间。
问候,
史考特
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句