GWT ScrollPanel 未显示完整内容答案

【问题标题】：GWT ScrollPanel not showing the complete contentGWT ScrollPanel 未显示完整内容
【发布时间】：2013-01-11 16:51:46
【问题描述】：

我使用 AbsolutPanel 作为主面板。我将另一个 AbsolutPanel 作为标题添加到主面板。现在我将一个 ScrollPanel 添加到主面板。 ScrollPanel 在另一个面板上包含 30 个按钮。滚动时最后一个按钮未完全显示。

如果我删除标题 AbsolutPanel 一切都会显示 - 如果我增加标题面板的高度，则显示更少。包含 VerticalPanel 的 ScrollPanel 的可滚动区域精确地随着位于 ScrollPanel 之外的标题面板的高度而减小。如果我对主面板使用“Overflow.SCROLL”，我可以滚动到verticalPanel的末尾，但在这种情况下，标题面板也会滚动。

非常感谢每一个帮助 - 谢谢！

为了重现这个问题，我做了以下测试：

AbsolutePanel main = new AbsolutePanel();
RootLayoutPanel.get().add(main);
main.setSize("100px", "100%");

AbsolutePanel header = new AbsolutePanel();
main.add(header);
header.add(new Label("HEADER"));

VerticalPanel content = new  VerticalPanel();
ScrollPanel scroll = new ScrollPanel(content);
scroll.setSize("100px", "100%");
main.add(scroll);

for (int i = 0; i < 30; i++)
    content.add(new Button("Button :" + i));

【问题讨论】：

如果您从以下答案中找到了解决方案，请接受并投票赞成答案。如果您有自己的答案，请放下并接受。这将有助于其他正在寻找类似问题答案的用户。

标签： gwt scroll

【解决方案1】：

由于您使用的是绝对面板、垂直面板和滚动面板的组合，因此它们都不是布局面板。所以你需要看到滚动面板的高度到某个确定的高度，而不是以百分比给出。

修改你的代码

scroll.setSize("100px", "100%");

到

scroll.setSize("100px", "500px");

TADA，它有效，你得到一个卷轴。

【讨论】：

【解决方案2】：

您的 VerticalPanel 基于试图填充 100% 父容器的表。不要认为你的布局是一个好方法。检查https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels 关于布局。

我建议您使用 DockLayoutPanel 来创建带有标题的 100% 高度布局。如果您开始使用面板名称中带有 [Layout] 的面板，请不要使用 VerticalPanel。它们是基于 Div 的。如果您不确定浏览器将如何处理，请务必不要混合 div 和表格。

【讨论】：

感谢您的回答！我确实阅读了这篇文章，并尝试只使用布局面板。最初的测试使用 AbsolutPanel 而不是 VerticalPanel，我确实有完全相同的。
为什么要使用绝对面板作为容器。当前的浏览器行为是完全正确的。解决它的唯一技巧是使用负 css 边距（标题高度）进行滚动。或者你可以使用绝对位置。但最好让 gwt 引擎来做。
我现在将 DockLayoutPanel 用于主面板，将 FlowPanel 用于其余面板 - 这工作正常，并且与基于网格的组件相比，基于 div 的组件滚动大内容看起来要快得多。非常感谢您的回答！