ANGULAR-JS：更改角度UI-GRID宽度

Question

我实现了如下所示的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>

谢谢

Answer 1

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

1. 您是否将CSS定义为：

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

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

3. 您是否包括网格CSS。

我在GridUI的文档中看到了示例代码示例： http ://plnkr.co/edit/?p=preview，我尝试了一些方法，但始终显示正确的宽度。 因此，可能是您的外部CSS破坏了布局。

检查其中断时间，然后查找将哪些CSS应用于收缩列，然后将其与工作列进行比较。 这是我可以在这里给出的最佳建议。