CODEWITHSUNDEEP
angularjsangular-ui-grid
Yasuyuki Uno
Yasuyuki Uno

Reputation: 2547

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

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?

Upvotes: 0

Views: 2060

Answers (1)

huan feng
huan feng

Reputation: 8623

typo wigth

change all

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

to

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

Upvotes: 4

Related Questions