如何将滚动条添加到 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.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 和你的 photos Panel需要全尺寸.

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

正如您在 Vaadin 手册章节 6.6.1

As you can read in the Vaadin Book chapter 6.6.1

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

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屋！