CODEWITHSUNDEEP
cssangularjsangular-ui-grid
Rebelek
Rebelek

Reputation: 365

UI Grid: Combining auto-size column with with pinnedRight results in a strange gap

What I need to achieve is a grid that uses all available with for the columns, but most-right column is pinned. That leads to using at least one column with '*' as a width and one column with pinnedRight set to true.

$scope.gridOptions.columnDefs = [
    { name:'address.street', width:150  },
    { name:'address.city', width:150 },
    { name:'address.state', width:50 },
    { name:'address.zip', width:50, pinnedRight: true },
    { name:'company', width:'*' }
];

The problem is that no matter what custom styles I try to add, there is always an empty gap between last two columns.

http://plnkr.co/edit/7FyyFmOkV5Kv4Xm49eiO?p=preview

Upvotes: 0

Views: 533

Answers (1)

Nasir T
Nasir T

Reputation: 2643

The issue your having is due to the vertical scrollbars being applied to the colomn group and the complete grid as well. As your setting your height:400px as fixed but the no. of rows is great enough to reserve scrollbar spacing for the group as well.

To solve this and also to hide the horizontal scroll spacing that comes in as default as well you need to set the scroll options in your gridOptions. In App.js, at line 4 change your empty/default gridOptions line to add the following 2 properties.

$scope.gridOptions = {
  enableVerticalScrollbar:2,
  enableHorizontalScrollbar:2
};

The values of these scroll properties can be as follows:

0; /* Never */

1; /* Always */

2; /* When_Needed / Auto */

Hope this helps.

Upvotes: 1

Related Questions