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

How to add scrollbar to Vaadin layout

提问by Firzen

I have found many questions where people are asking how to hide scrollbars in Vaadin layouts, but my problem is that Vaadin don't show me any scrollbars. For example I can have this code:

我发现了很多问题，人们询问如何在 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());
}

But when I run this code, buttons on the page are simply cut off when the browser window is too small to show them all. No scrollbars will appear ever.

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

I have also tried to create Panel, and then add my layout to this panel. I have tested both - panel.addComponent(foo)and also panel.setContent(foo), and I tried to set panel.setScrollable(true)too. Without any success.

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

Is there any way to add scrollbar to some kind of Vaadin layout? I use Vaadin 6.8.7. Thanks in advance!

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

---

---

There is my full code:

有我的完整代码：

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;
}

This method is used in class which extends Window, and so in time of initialization is there: setContent(openZoomifyLayout());

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

采纳答案by nexus

Your spHorizontalLayoutand your photosPanelneed to be full sized.

您spHorizontalLayout和您photosPanel需要全尺寸。

As you can read in the Vaadin Book chapter 6.6.1

正如您在 Vaadin Book 第6.6.1章中所读到的那样

Normally, if a panel has undefined size in a direction, as it has by default vertically, it will fit the size of the content and grow as the content grows. However, if it has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction. Scroll bars in a Panel are handled natively by the browser with the overflow: auto property in CSS.

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

回答by blubb

You will need a panel. You also need to ensure that the panel's size is fixed and not "natural". If its size is "natural", the panel will be enlarged until its content can be displayed fully. The default size for panels is natural, and that is the reason why you don't see any scrollbars.

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

回答by geert3

Follow these steps:

按着这些次序：

• the outer layout needs fixed or percentual size in the relevant direction (e.g. VerticalLayout needs fixed or percentual height)
• the inner layout needs undefined size in that direction
• the outer layout needs stylename v-scrollable

• 外部布局在相关方向上需要固定或百分比大小（例如 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);
...
}

This will make the CustomComponentshow a scroll bar while contentgrows as needed.

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