如何在Vaadin布局中添加滚动条

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.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());

- Firzen

---

你能展示一下你的主要布局吗？可能在布局链的某个地方有一个高度固定的组件。 - André Schild

我已经添加了主布局的代码.. :-) - Firzen

Answer 1

您的 sp 水平布局和您的 photos 面板需要全尺寸。

如您可以在Vaadin书籍第 6.6.1 章节中阅读到：

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

- nexus

---

那绝对完美！你救了我！它运行良好。谢谢你。 - Firzen

Answer 2

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

- blubb

Answer 3

请按照以下步骤操作：

• 外部布局需要在相关方向上具有固定或百分比大小（例如，VerticalLayout需要具有固定或百分比高度）
• 内部布局在该方向上需要未定义的大小
• 外部布局需要样式名称v-scrollable

例如：

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需要增长时显示滚动条。

- geert3