如何在角度2 ag-grid中的两行ag-grid之间添加空间

时间:2017-09-29 05:57:16

标签: angular angular2-directives ag-grid ag-grid-ng2

enter image description here

上面的图像就像我想要的

但是我使用的是ag-grid,所以我的输出就像这样下面的图像

enter image description here 我正在使用ag-grid。我希望在两行网格之间有更多的间距,这表明该行是分开的。

 .ag-body-container .ag-row {
        margin-top:15px;
        border: 1px solid $white-three;
        background-color: #d8d8d8;
        border-radius: 4px;
        font-size: 12px;
        color: #505050;

我为网格行给出了这个。但它将所有行的边距设为15px。但问题是上面的行被覆盖为down。所以基本上我需要分隔具有特定空间的行。 请尽快告诉我。谢谢你

1 个答案:

答案 0 :(得分:4)

由于ag-grid使用绝对定位来放置行并提供高度,因此填充和边距将仅移动行并将它们隐藏在彼此之后。相反,我建议为行提供更大的高度,以便为边框留出空间。

这样的事情会起作用:

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {'border-bottom': 'white 20px solid'},
    ....
};

或者,如果您需要考虑行中的垂直居中:

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {
        'border-bottom': 'white 10px solid',
        'border-top': 'white 10px solid' 
    },
    ....
};

Plnkr example