css - Angular -JS : Angular UI-GRID width changing

Question

我实现了 angular ui-grid，它看起来应该是这样的: Angular ui-grid

但在某些情况下它会变成这样: Shrinked 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>

谢谢

Answer 1

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

1. 你有没有将你的 css 定义成类似这样的东西:

   .网格{ 宽度:500px； 高度:250px；

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

3. 您是否包含了网格 CSS。

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

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