UI-Grid does not take 100% width on page load

Question

I am using ui-grid to showing data in table. when i load the page and leave for few second and then click on the tab (which containing ui-grid), the ui-grid css break. it does not show width of ui-grid 100% of container.but when i load page and just click on tab (containg ui-grid). ui-grid is showing perfect, i mean width of that is 100% of container. I don't know what is the problem.this is the code, i am working on :

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>

Note: ui-grid is inside Angular bootstrap Tab

and here is the snapshot of collapse grid :

Answer 1

Are you using an animation on page load - perhaps a tab or a modal? If so, then the usual workaround is the one we use in the modal tutorial: http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

The problem is that the grid isn't responsive, it gets it's size on render. If you haven't given a fixed size it gets it from the container size. If your container is being animated at the time, the size may not be the real size.

Answer 2

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

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

This did the job for me.

Answer 3

use $scope.gridApi.core.handleWindowResize(); this method in interval time to solve this problem

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);
    }