我有一个kendoToolbar,其中包含3个button
和label
,最终我可能会在其中添加另一个button
或下拉菜单以便导出网格数据,无论如何..
我想知道如何让引导程序label
填满工具栏的剩余区域。原因是因为当用户导航到此网格时,我希望他们知道它们的位置。
现在它看起来像这样:
这就是我希望它看起来像
的样子现在我的代码看起来像这样:
$("#customerToolbar").kendoToolBar({
items: [
{
template: " <button type='button' id='AddRecord' onClick='CustomerPopupEditor()' class='btn btn-primary'><span class='glyphicon glyphicon-plus'></span> Add</button>  "
},
{
template: "<button type='button' id='edit' class='btn btn-warning myEdit'><span class='glyphicon glyphicon-edit'></span> Edit</button>  "
},
{
template: "<button type='button' id='delete' class='btn btn-danger myDelete'><span class='glyphicon glyphicon-remove'></span> Delete</button>"
},
{
template: "<div class='label label-success'>Customers</div>"
}
]
});
这里是dojo
修改
它不一定需要label
来填充工具栏的剩余空间,它可以是任何能产生与我想要的效果相似的效果。
答案 0 :(得分:0)
使用flexbox
即可实现此目标。
切换整页以查看结果。
注意:我在CSS中使用body
来覆盖已使用的CSS而不使用!important
。
/*CSS changes*/
body .k-toolbar {
display: flex;
}
body .k-toolbar .k-button,
body .k-toolbar > * {
display: flex;
margin: 0 1%;
}
body .k-toolbar-last-visible {
flex: 1;
align-items: center;
}
body .label {
flex: 1;
padding: 1.5em
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="customerToolbar">
</div>
<!-- Script -->
<script>
$("#customerToolbar").kendoToolBar({
items: [{
template: " <button type='button' id='AddRecord' onClick='CustomerPopupEditor()' class='btn btn-primary'><span class='glyphicon glyphicon-plus'></span> Add</button>  "
}, {
template: "<button type='button' id='edit' class='btn btn-warning myEdit'><span class='glyphicon glyphicon-edit'></span> Edit</button>  "
}, {
template: "<button type='button' id='delete' class='btn btn-danger myDelete'><span class='glyphicon glyphicon-remove'></span> Delete</button>"
}, {
template: "<div class='label label-success'>Customers</div>"
}]
});
</script>
&#13;