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

2022-09-02 21:15:12

我发现很多问题,人们都在问如何在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.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());


答案 1

您和您需要全尺寸。spHorizontalLayoutphotosPanel

正如你在Vaadin Book第6.6.1章中读到的

通常,如果面板在某个方向上具有未定义的大小(默认情况下垂直方向),则它将适合内容的大小并随着内容的增长而增长。但是,如果它具有固定或百分比大小,并且其内容变得太大而无法容纳内容区域,则将显示特定方向的滚动条。面板中的滚动条由浏览器通过 CSS 中的 overflow: auto 属性进行本机处理。


答案 2

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