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％的寬度

回答

相關問題