0

我实现了 Angular ui-grid，它应该看起来像： Angular ui-grid

但在某些情况下，它变得像： 收缩网格

我需要解决方案，以便网格宽度像第一张图像一样保持不变。当我按 F12 然后导航到其他页面然后返回时，它通常会缩小。

我的网格选项是：

$scope.gridOptions = {
                    enableRowSelection : true,
                    enableRowHeaderSelection : false,
                    multiSelect : false,
                    enableColumnMenus : false,
                    columnDefs : [ {
                        "field" : "title",
                        "displayName" : "Title",
                        "visible" : true,
                        "enableHiding" : false,
                    }, {
                        "field" : "description",
                        "displayName" : "Description",
                        "visible" : true,
                        "enableHiding" : false
                    }, {
                        "field" : "dueDate",
                        "displayName" : "Due Date (mm/dd/yyyy)",
                        "cellFilter" : "date:'MM-dd-yyyy HH:mm a'",
                        "visible" : true,
                        "enableHiding" : false
                    }, {
                        "field" : "status",
                        "displayName" : "Status",
                        "visible" : false,
                        "enableHiding" : false
                    }, ]
                };

HTML:

            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="panel panel-default">
                    <div ui-grid="gridOptions" ui-grid-selection class="grid height-250"></div>
                </div>
            </div>

谢谢

4

1 回答 1

0

通过查看 angular ui grid 的文档：http: //ui-grid.info/docs/#/tutorial/101_intro，我可以提出以下建议：

  1. 您是否将您的 css 定义为：

    .grid { 宽度：500px; 高度：250px；}

  2. 你有正确格式的数据$scope.gridOptions.data吗？您是否使用例如：float 覆盖网格 css。没有样品很难说。

  3. 您是否包含网格 css。

我在 GridUI 的文档中看到了示例 plunker：http ://plnkr.co/edit/?p=preview我尝试了几件事，但它总是显示正确的宽度。所以它可能是你的外部 css 破坏了布局。

检查它何时中断并查找将什么 css 应用于收缩列，然后将其与工作列进行比较。这是我能在这里给出的最好建议。

于 2016-06-22T09:06:41.120 回答