FlexGrid在Bootstrap的模态框中显示异常
在bootstrap3的模态框中有一个FlexGrid,有时可以正常显示,但大多数情况下,都会出现下图的情况。如果这时候筛选一次的话(在搜索框中输入任意字符,再删除),显示就会正常。正常显示的效果:
实在是找不到原因,怀疑是不是与bootstrap3冲突?
html代码:
<div class="modal fade" tabindex="-1" role="dialog" id="select-menu">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">选择跳转菜单</h4>
</div>
<div class="modal-body" id="select-menu-body">
@(Html.C1().FlexGrid().Id("menuGrid"))
</div>
<div class="modal-footer">
<div style="float: left">
搜索名称:<input type="text" id="searchName" placeholder="输入名称" />
</div>
<div style="float: right;">
<button type="button" class="btn btn-primary" id="selectedMenu">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
<div style="clear:both"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JS代码:
//显示模态框并绑定数据
function getMenuFunc() {
$("#select-menu").modal('show');
if (!menuLoaded) {
$.getJSON("@Url.Action("GetMenuFunc")", data => {
menuGrid.initialize({
autoGenerateColumns: false,
isReadOnly: true,
columns: [
{ binding: "MenuItemId", header: "菜单编号", width: 200 },
{ binding: "MenuItemName", header: "菜单名称", width: "*" }
],
itemsSource: data
});
menuLoaded = true;
//试图刷新布局,但是没用
//menuGrid.invalidate(true);
})
}
}
问题已经收到,我这边验证后给你答复 可以确定是和bootstrap有冲突,我换成C1Popup对话框,问题就解决了。 你好,控件之间确实有可能会有兼容性问题,如果用C1Popup对话框能满足需求的话,建议就用C1Popup,
页:
[1]