Question

我发现很多问题，人们都在问如何在Vaadin布局中隐藏滚动条，但我的问题是Vaadin没有向我显示任何滚动条。例如，我可以使用此代码：

HorizontalLayout layout = new HorizontalLayout();
layout.setSizeUndefined(); // I also tried setSizeFull()
for(Integer i = 1; i <= 15; i++) {
    layout.addComponent(new Button("Test button #" + i.toString());
}

但是当我运行此代码时，当浏览器窗口太小而无法全部显示时，页面上的按钮就会被切断。永远不会出现滚动条。

我还尝试创建Panel，然后将我的布局添加到此面板。我测试了两个 - panel.addComponent(foo)和panel.setContent(foo)，我也尝试设置panel.setScrollable(true)。没有任何成功。

有没有办法将滚动条添加到某种Vaadin布局？我使用Vaadin 6.8.7。提前谢谢！

我的完整代码：

private ComponentContainer openZoomifyLayout() {
    Panel panel = new Panel();
    Panel panel2 = new Panel();

    middlePanel = new MiddlePanel();

    VerticalLayout mw = new VerticalLayout();
    mw.setSizeFull();

    HorizontalLayout sp = new HorizontalLayout();
    Panel photos = new Panel();
    photos.setSizeUndefined();

    mw.addComponent(panel);
    mw.addComponent(panel2);
    mw.addComponent(sp);

    mw.setExpandRatio(sp, 99);
    mw.setExpandRatio(panel, 0);
    mw.setExpandRatio(panel2, 0);

    panel2.addComponent(middlePanel);

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER);
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER);

    photos.setContent(table);
    photos.setScrollable(true);
    sp.addComponent(photos);
    sp.addComponent(createMainDetail());

    return mw;
}

此方法在扩展Window的类中使用，因此在初始化时有：setContent(openZoomifyLayout());

Answer 1

您的sp HorizontalLayout和photos Panel需要全尺寸。

正如您可以阅读Vaadin Book章节6.6.1

通常情况下，如果某个面板在一个方向上的大小不确定，就像它一样默认垂直，它将适合内容的大小并增长为内容增长。但是，如果它具有固定或百分比的大小它的内容太大而不适合内容区域，滚动条将出现在特定的方向。面板中的滚动条是浏览器本地处理溢出：auto属性 CSS。

Answer 2

您需要一个面板。您还需要确保面板的尺寸是固定的，而不是“自然的”＃34;。如果它的大小是＆＃34;自然＆＃34;，面板将被放大，直到其内容可以完全显示。面板的默认大小是自然的，这就是您没有看到任何滚动条的原因。

Answer 3

请按照以下步骤操作：

外部布局需要相关方向的固定或百分比大小（例如VerticalLayout需要固定或百分比高度）
内部布局需要在该方向上未定义的大小
外部布局需要stylename v-scrollable

e.g。

public class SomeView extends CustomComponent implements View
{
        this.addStyleName("v-scrollable");
        this.setHeight("100%");
        VerticalLayout content = new VerticalLayout();
        // content has undefined height by default - just don't set one
        setCompositionRoot(content);
...
}

这将使CustomComponent显示滚动条，content根据需要增长。

如何将滚动条添加到Vaadin布局

3 个答案: