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 :

enter image description here

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: http://stackoverflow.com/questions/24157824/ui-boostrap-accordion-container-width-issue/24160257#24160257 — mainguy, Apr 21 '15 at 14:57

score 13 · Accepted Answer · answered Apr 21 '15 at 19:38

13

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.

answered Apr 21 '15 at 19:38

PaulL

6,650
3
35
39

That solved my problem with grids within ui-tabs. Thanks – Rafael A. M. S. Oct 18 '16 at 23:03

KARTHIKEYAN.A · Answer 2 · 2018-01-09T04:57:57.670

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

The above code core function is $interval( function() { $scope.gridApi.core.handleWindowResize(); }, 500, 10) — KARTHIKEYAN.A, May 19 '16 at 07:27

score 1 · Answer 3 · answered Nov 03 '16 at 14:05

1

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

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

This did the job for me.

answered Nov 03 '16 at 14:05

SReddy

41
4

score 0 · Answer 4 · answered Sep 30 '15 at 06:20

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

score 0 · Answer 5 · answered Mar 04 '16 at 23:58

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>

score 0 · Answer 6 · edited Mar 17 '16 at 23:00

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.

score 0 · Answer 7 · edited May 22 '18 at 14:55

0

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

edited May 22 '18 at 14:55

Jesse

3,522
6
25
40

answered Feb 02 '17 at 15:51

Ravindra Bakkamanthala

33
1
6

2

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). – ippi May 22 '18 at 12:58

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

7 Answers7