UI 网格：将自动调整大小的列与 pinnedRight 结合使用会导致出现奇怪的间隙

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 行更改 empty/default gridOptions 行以添加以下 2 个属性。

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

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

0; /* 从不 */

1; /* 总是 */

2; /* When_Needed / 自动 */

希望对您有所帮助。

UI 网格：将自动调整大小的列与 pinnedRight 结合使用会导致出现奇怪的间隙

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

css

angularjs

angular-ui-grid