Home Ask Login Register

Developers Planet

Your answer is one click away!

Spirit February 2016

UI Grid v3.1.0 column auto width issue detected

I have found many questions about UI Grid autowidth issue. I managed to reproduce one of them and would like to share with you the details on how to reproduce it.

First, I have the default UI Grid inside of a hidden modal (you can find the code snippet at the end of this post).

Steps to reproduce:

  1. Run the code snippet, press "Launch demo modal"; (there is no issues); enter image description here

  2. Close the modal;

  3. Resize browser window. here it is. Column width is reset to a wrong value. enter image description here
    var app = angular.module('app', ['ui.grid']);
    app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
      $scope.gridOptions1 = {
        enableSorting: true,
        columnDefs: [
          { field: 'name' },
          { field: 'gender' },
          { field: 'company', enableSorting: false }
        onRegisterApi: function( gridApi ) {
          $scope.grid1Api = gridApi;
     $scope.gridOptions1.data = [
        { name: 1, gender: 2, company: 3 }, 
        { name: 1, gender: 2, company: 3 }, 
        { name: 1, gender: 2, company: 3 }, 
        { name: 1, gender: 2, company: 3 }, 
        { name: 1, gender: 2, company: 3 }];
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://rawgit.com/angular-ui/bower-u        


Spirit February 2016

Also I would like to share with you an approach of fixing it.

Actually, there are two bugs here.

  1. UI Grid is set to 0 on page resize when modal is hidden;
  2. UI Grid is set to 0 on page load.

The first one is easy to detect and fix if you use uncompressed version of UI Grid:

There reason of both issues is the same. The width of hidden element is zero.

A simple workaround with jQuery will be as follows for the first case:

// Resize the grid on window resize events
function gridResize($event) {
    grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm);
    grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm);
    if(!$($elm).is(':hidden') && grid.gridWidth > 0) { //add such if statement before                 
        grid.refreshCanvas(true); //this is UI Grid code

The second case is not so simple to fix. Because we need to get the width of Grid container ( in this case modal is the container ).

Container might be inside of a hidden element ( that means jQuery(gridContainer).width() will return zero ).

That is how I came across jQuery.actual plugin (github or demo). I will use it to show you a solution for this specific case:

// Initialize the directive
function init() {
    if($($elm).is(':hidden')) { //added
        grid.gridWidth = $scope.gridWidth = $($elm).parent().actual('width'); //added
    }  //added
    else {  //added
        grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); //this is UI Grid code
    }  //added

As result we will get a UI G

Post Status

Asked in February 2016
Viewed 3,859 times
Voted 9
Answered 1 times


Leave an answer

Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved