CSS 如何更改ui-grid行的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27200875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change height of ui-grid row?
提问by Pavel Nikolov
I am using ui-grid. I have a lot of rows and that is why I use scrolling. Everything works perfectly ok until I try to change the height of the rows. Then the scrolling becomes a mess. I have added an example here http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=previewThis is one of the tutorials from the ui-grid website - the only thing I have changed is the CSS. I have added these rules.
我正在使用ui-grid。我有很多行，这就是我使用滚动的原因。一切正常，直到我尝试更改行的高度。然后滚动变得一团糟。我在这里添加了一个例子http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview这是来自 ui-grid 网站的教程之一 - 我唯一改变的是 CSS。我已经添加了这些规则。
.ui-grid-cell-contents {
padding: 1px 1px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
height: 22px !important;
font-size: 12px;
line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
height: 55px !important;
}
.ui-grid-filter-container {
padding: 1px 3px;
}
Scrolling works perfectly ok if the above CSS rules are removed. So I either need to add more CSS rules or I need to use some API of the grid in order to set row height properly. Any help will be much appreciated.
如果删除了上述 CSS 规则，滚动就可以正常工作。所以我要么需要添加更多的 CSS 规则，要么我需要使用网格的一些 API 来正确设置行高。任何帮助都感激不尽。
How do I change row height and keep scrolling smooth?
如何更改行高并保持平滑滚动？
UPDATE: Here is a comparison between a default grid and one with modified CSS: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=previewtry to scroll the rows up and down for each grid. The difference should be pretty obvious.
更新：这是默认网格和具有修改 CSS 的网格之间的比较：http: //plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview尝试向上和向下滚动每个网格的行。区别应该是很明显的。
回答by mainguy
Take out the:
取出：
height: 22px !important;
from the css and add:
从 css 并添加：
rowHeight:22
to the gridOptions.
到 gridOptions。
I have the feeling that this is much smoother.
我有这样的感觉，这要顺畅得多。
回答by Romcode
scope.gridOptions = { rowHeight: 33 } The best way of changing the row height is from the grid options.
scope.gridOptions = { rowHeight: 33 } 更改行高的最佳方法是从网格选项。
回答by Amir978
Try add this to your css:
尝试将其添加到您的 css 中：
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}
.ui-grid-row, .ui-grid-cell {
height: auto !important;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
回答by Rohan Jetha
Just alter gridclass accordingly.
只需相应地更改网格类。
.grid{
height: 70vh;
}
