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 :

Holbert

What happens when you resize the browser window? May seem to be a stupid question, but I had this issue once. Maybe look here for a workaround: #24158324 – Aldous

if i resize browser window it works !!! – Holbert

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.

Hasan

That solved my problem with grids within ui-tabs. Thanks – Pines

Answer 2

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

Locomobile

The above code core function is $interval( function() { $scope.gridApi.core.handleWindowResize(); }, 500, 10) – Locomobile

Answer 3

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

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

This did the job for me.

Gwyn

Answer 4

The workaround for this is adding the width and rowHeight for row and cell. As I indicated this is a workaround and I am sure there must other ways of doing this but this a quick fix and should get you what you at least going :)

    $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}
                ]}

Teflon

Answer 5

With the suggested polling approach, the function is called after a specified wait, so each width change occurs suddenly. This results in substantial judder when the user quickly changes the table size.

A much better approach is to bind a resize handler to call a resize function when the viewport changes

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

My project uses a sidebar, so I account for the sidebar width or padding width (if sidebar is open or not), then just set a variable bound to an ng-style on my table wrapper

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>

Citric

Answer 6

This is what worked for me like a charm!

Add say ng-style="windowResize" to the ui grid markup in HTML template, and on $scope.windowResize, add width: 100% within onRegisterApi function within the scope.

So, basically onRegisterApi() is the default function from ui-grid that triggers when grid is actually drawn, and so basically we are conditionally adding width 100% to grid and making it responsive for all viewports.

Bet

Answer 7

Remove ui-grid-resize-columns from your HTML div tags.

Chamorro

I found this answer in the "low quality post" review queue, probably because how short it is. I guess it's fine if it resolves OP's question so I'll just leave it. But it sure would become a high quality post if there were any hints that you had tried your answer out and it works. (Or really any thoughts to why you think this would work, so we can assume that you are not just taking a shot in the dark). – Asymptote