Angular ui-grid unable to set column width and doesn't show horizontal scrollbar

Question

I'm a newbie with AngularJS and ui-grid.

I want to show horizontal scrollbar, but it doesn't show and unable to change column width. The width of the grid is not altered and all the columns are shrinked to fit the grid.

1st. I did copy-paste from horizontal_scrolling tutorial to my Plunker. OK. It works.

It defines column width like below code.

$timeout( function() {
  // colCount=10;
  for (var colIndex = 0; colIndex < colCount; colIndex++) {
    $scope.gridOptions.columnDefs.push({ 
      name: 'col' + colIndex,
      width: 200
    });
  }
});

2nd. I changed a little. But it doen't work.... 2nd example Plunker

var arr = [{name:'col0', wigth: 200},
          {name:'col1', wigth: 200},
          {name:'col2', wigth: 200},
          {name:'col3', wigth: 200},
          {name:'col4', wigth: 200},
          {name:'col5', wigth: 200},
          {name:'col6', wigth: 200},
          {name:'col7', wigth: 200},
          {name:'col8', wigth: 200},
          {name:'col9', wigth: 200}];
$timeout( function() {
  // arr.length=10;
  for (var i = 0; i < arr.length; i++) {
    $scope.gridOptions.columnDefs.push(arr[i]);
  }
});

Why 2nd example doesn't alter column width and doesn't show horizontal scrollbar?

What's the difference between 1st and 2nd?

huan feng · Accepted Answer · 2014-12-15 07:26:46Z

4

typo wigth

change all

var arr = [{name:'col0', wigth: 200},

to

var arr = [{name:'col0', width: 200},

answered Dec 15, 2014 at 7:26

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui-grid unable to set column width and doesn't show horizontal scrollbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related