angularjs-ui-grid 滚动到列表底部后有额外的空白 [英] angularjs-ui-grid has extra white space after scrolling to the bottom of the list

问题描述

当我的 ui-grid 中有足够多的行进行滚动时，出于某种原因，列表底部似乎有很多空白.

When I have enough rows in my ui-grid to do scrolling, it seems to have a lot of whitespace at the bottom of the list for some reason.

我已经把它固定在这段代码上(我认为?):

I've nailed it down to this piece of code (i think?):

styles['margin-top'] = hiddenRowWidth + 'px';

ui-grid.js 第 3038 行

line 3038 of ui-grid.js

不知道为什么它在底部添加了这么多的空白.有任何想法吗?我在想这是因为我的容器是 100% 的高度，但即使使用特定的像素高度，它似乎也是如此.

Not sure why it's adding so much white space at the bottom though. Any ideas? I was thinking it's because my container is 100% height, but it seems to do this even with a specific pixel height as well.

嗯，现在我不确定那段代码是罪魁祸首.ui-grid-canvas 元素有一个巨大的高度，仍然不知道为什么.

edit: Well, now I'm not certain that it was that code that's the culprit. The ui-grid-canvas element has a HUGE height, still not sure why.

关闭它，因为它似乎与 CSS 相关，这只是我的自定义 CSS 的问题.

Closing this out, as it seems to be something CSS related that's only a problem for my custom CSS.

推荐答案

我找到了罪魁祸首.

我已经将 padding: 0 添加到 .ui-grid-canvas 中，因为标题边框和行开头之间的 1px 空间真的让我很烦恼.但是，无论出于何种原因，这都会在尝试处理滚动虚拟化时中断计算.

I had added padding: 0 to .ui-grid-canvas, because the 1px space between the header border and the start of the rows was really bugging me. However, for whatever reason this breaks the calculations when it's trying to handle virtualization for scrolling.

删除我的自定义填充后，一切似乎都正常.

Upon removing my custom padding, everything seems to work normally.

这篇关于angularjs-ui-grid 滚动到列表底部后有额外的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！