UI-Grid在页面加载时不占用100％的宽度

我正在使用ui-grid在表中显示数据。当我加载页面并离开几秒钟，然后点击选项卡（其中包含UI网格），UI网格CSS休息。它没有显示ui-grid 100％容器的宽度。但是当我加载页面并且只需点击选项卡（包含ui-grid）。 UI网格显示完美，我的意思是说宽度是容器的100％。我不知道什么是problem.this是代码，我的工作：UI-Grid在页面加载时不占用100％的宽度

JS：

$scope.gridOptions= { 
      enableFiltering: true, 
      enableGridMenu : true, 
      enableRowSelection: true, 
      enableSelectAll: true, 

      selectionRowHeaderWidth: 50, 
      // rowHeight: 35, 
      // infiniteScrollRowsFromEnd: 50, 
      // infiniteScrollUp: true, 
      infiniteScrollDown: true, 
      columnDefs : [ 
       { displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'}, 
       { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}}, 
       { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} } 
      ] 
}

HTML：

<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll> 
</div>

注：ui-grid在内部角引导标签

这里是崩溃网格的快照：

enter image description here

来源

2015-04-21 Mukund Kumar

当您调整浏览器窗口大小时会发生什么？似乎是一个愚蠢的问题，但我曾经有过这个问题。也许看看这里的解决方法：http://stackoverflow.com/questions/24157824/ui-boostrap-accordion-container-width-issue/24160257#24160257 – mainguy

如果我调整浏览器窗口它的作品！ –

是否使用在页面加载动画 - 也许一个标签或者一个模式？如果是这样，那么通常的解决方法是我们在模态教程中使用的方法：http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

问题是网格没有响应，它在渲染时获取它的大小。如果你没有给出一个固定的大小，它会从容器大小中获得它。如果您的容器当时正在制作动画，则尺寸可能不是真正的大小。

来源

2015-04-21 19:38:02 PaulL

这解决了我用ui-tabs中的网格问题。谢谢 –

解决方法是为行和单元格添加宽度和rowHeight 。正如我指出这是一种变通方法，我相信一定有这样做的其他方式，但这种速战速决，应该得到你至少经历什么:)

$scope.gridOptions={ 
    //set the row height to a fixed length 
    rowHeight: 80, 
       enableFiltering: true, 
       enableGridMenu : true, 
       enableRowSelection: true, 
       enableSelectAll: true, 
       selectionRowHeaderWidth: 50, 
       infiniteScrollDown: true, 
       columnDefs : [ 
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:100}, 
        { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}, width:100}, 
        { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} , width:100} 
       ]}

来源

2015-09-30 06:20:07

，用建议的轮询方法，功能在指定的等待之后调用，所以每个宽度改变突然发生。当用户快速更改表格大小时，这会导致严重的抖动。

更好的方法是绑定一个调整大小处理程序调用调整大小功能时，视改变

angular.element($window).bind('resize',() => { 
     this.updateTableWidth(); 
    });

我的项目使用了边栏，所以我占了侧边栏宽度或填充宽度（如果侧边栏开放与否），则只需设置绑定到NG-风格变量在我的桌子包装

private updateTableWidth() { 
    let width = this.$window.innerWidth; 
    let modifier = (width >= 1280) ? this.sidebarWidth : this.paddingWidth; 
    this.tableWidth = (width - modifier) + 'px'; 
} 

<div ng-style="{'width': ctrl.tableWidth}"> 
    <div ui-grid></div> <!-- Whatever your grid is --> 
</div>

来源

2016-03-04 23:58:33

这是对我工作就像一个魅力！

向HTML模板中的UI网格标记添加ng-style="windowResize"并在$scope.windowResize上添加width: 100%函数在onRegisterApi函数范围内。

因此，基本上onRegisterApi()是ui-grid的默认函数，它在网格实际绘制时触发，所以基本上我们有条件地将宽度100％添加到网格并使其对所有视口响应。

来源

2016-03-17 22:19:51 siddhi

使用$ scope.gridApi.core。handleWindowResize（）;此方法的间隔时间来解决这个问题

onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 
     $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); 
     //$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter); 
     gridApi.selection.on.rowSelectionChanged($scope, function(row) { 
      $scope.selectedUser = row.entity.dev_id; 
      console.log(row); 
      console.log(row.grid.selection.lastSelectedRow.isSelected); 
      /*$http.get('./api/ioni_developers/' + $scope.selectedUser).then(function(response) { 
       if(row.grid.selection.lastSelectedRow.isSelected === true){ 
        $scope.data.dev_id = response.data.dev_id; 
        $scope.data.dev_name = response.data.dev_name; 
        $scope.data.dev_email = response.data.dev_email; 
        $scope.selected = false;   
       }else{ 
        $scope.data.dev_id = ''; 
        $scope.data.dev_name = ''; 
        $scope.data.dev_email = ''; 
        $scope.selected = true; 
       } 
      })*/ 
     }); 
     $scope.selected = true; 
     $interval(function() { 
      $scope.gridApi.core.handleWindowResize(); 
      }, 500, 10); 
    }

来源

2016-05-19 07:26:09

上面的代码核心函数是$ interval（function（）{scope：} scope.gridApi.core.handleWindowResize（）; }，500,10） –

$timeout(function() { 
       $scope.gridApi.core.handleWindowResize(); 

      }, 500); 
      $scope.gridApi.core.refresh();

该做的工作对我来说。

来源

2016-11-03 14:05:11 SReddy

从HTML div标签中删除ui-grid-resize-columns。

来源

2017-02-02 15:51:30

UI-Grid在页面加载时不占用100％的宽度

回答

相关问题