css - 用户界面网格 : Combining auto-size column with with pinnedRight results in a strange gap

Question

我需要实现的是一个网格，它使用所有可用的列，但最右边的列被固定。 这导致至少使用一列宽度为“*”的列和一列 pinnedRight 设置为 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:'*' }
];

问题是无论我尝试添加什么自定义样式，最后两列之间总是有空白。

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

Answer 1

您遇到的问题是由于垂直滚动条应用于列组和整个网格。作为你的设置你的 height:400px 是固定的但是没有。行数足以为组保留滚动条间距。

要解决此问题并隐藏默认情况下的水平滚动间距，您需要在 gridOptions 中设置滚动选项。在 App.js 中，第 4 行更改您的空/默认 gridOptions 行以添加以下 2 个属性。

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

这些滚动属性的值可以如下:

0;/* 从不 */

1;/* 总是 */

2;/* When_Needed/自动 */

希望这对您有所帮助。