firechun 发表于 2019-12-22 07:18:43

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">&times;</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);
                })
            }
      }


Richard.Ma 发表于 2019-12-23 10:00:37

问题已经收到,我这边验证后给你答复

firechun 发表于 2019-12-23 11:06:53

可以确定是和bootstrap有冲突,我换成C1Popup对话框,问题就解决了。

Richard.Ma 发表于 2019-12-23 16:38:48

你好,控件之间确实有可能会有兼容性问题,如果用C1Popup对话框能满足需求的话,建议就用C1Popup,
页: [1]
查看完整版本: FlexGrid在Bootstrap的模态框中显示异常