如何更改UI的网格行的高度? [英] How to change height of ui-grid row?

查看:187
本文介绍了如何更改UI的网格行的高度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用 UI电网。我有很多行,这就是为什么我用滚动。直到我试图改变行的高度,一切工作完全确定。然后滚动变得一团糟。我在这里<一个附加的例子href=\"http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=$p$pview\">http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=$p$pview
这是从UI网网站上的教程之一 - 我已经改变的唯一的事情就是CSS。我已经添加了这些规则。

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=preview This 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-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;
}

滚动工作,如果上面的CSS规则将被删除完全确定。
所以,我要么需要添加更多的CSS规则或我需要使用网格的一些API,以正确设置行高。
任何帮助将大大AP preciated。

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.

如何更改行高,并保持流畅的滚动?

How do I change row height and keep scrolling smooth?

更新
这里是一个默认的网格,一个与修改CSS之间的比较:
<一href=\"http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=$p$pview\">http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=$p$pview
尝试上下每个网格滚动的行。该差额pretty明显。

UPDATE: Here is a comparison between a default grid and one with modified CSS: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview try to scroll the rows up and down for each grid. The difference should be pretty obvious.

推荐答案

取出:

height: 22px !important;

从CSS并添加:

from the css and add:

rowHeight:22

到gridOptions。

to the gridOptions.

我有一种感觉,这是顺利得多。

I have the feeling that this is much smoother.

叉形Plunker

这篇关于如何更改UI的网格行的高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆