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

我发现很多问题,人们都在问如何在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,然后将我的布局添加到此面板。 我测试了两个 – 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());

您的sp HorizontalLayoutphotos Panel需要全尺寸。

正如你可以在Vaadin Book 6.6.1中读到的那样

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

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

跟着这些步骤:

  • 外部布局需要相关方向的固定或百分比大小(例如VerticalLayout需要固定或百分比高度)
  • 内部布局需要在该方向上未定义的大小
  • 外部布局需要stylename 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根据需要增长。