如何将滚动条添加到Vaadin布局 [英] How to add scrollbar to Vaadin layout

问题描述

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

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:

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.

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

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.

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

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

有我的完整代码：

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（））;

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

推荐答案

你的 sp Horizo​​ntalLayout 和你的照片 面板需要全尺寸。

Your sp HorizontalLayout and your photos Panel need to be full sized.

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

As you can read in the Vaadin Book chapter 6.6.1

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

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.

这篇关于如何将滚动条添加到Vaadin布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！