如何在ANGULAR 1的UI-GRID末尾添加空格

We have a requirement where we need to add blank space at the end of ui grid. please check the image for more clarity :

我们需要在ui网格的末尾添加空格。请检查图像以获得更清晰：

1 个解决方案

#1

You can modify the widths of all the columns so the total of them doesn't fill the container entirely. Then, through CSS, you can adjust that space. Here you have an example:

您可以修改所有列的宽度，以使它们的总数不会完全填充容器。然后，通过CSS，您可以调整该空间。这里有一个例子：

https://codepen.io/davidballester/pen/XejpJb

This is the columns definition:

这是列定义：

$scope.gridOptions.columnDefs = [{
  name: 'id',
  width: "20%"
}, {
  name: 'name',
  width: "30%"
}, {
  name: 'age',
  displayName: 'Age (not focusable)',
  allowCellFocus: false,
  width: "15%"
}, {
  name: 'address.city',
  width: "20%"
}];

Then, the CSS tweaking:

然后，CSS调整：

.ui-grid-top-panel {
  background: none;
  border: none;
}

.ui-grid-header-cell {
  background: #ccc;
}

.ui-grid-viewport {
  overflow: hidden !important;
}

.ui-grid-header {
  border: none;
}

#1