Vaadin 8 视图：window 调整大小时没有水平滚动条

Question

我有一个具有多个视图的 Vaadin 8 应用程序。

public class ViewName extends Panel implements View {

面板中有一个 VerticalLayout 作为主要布局。

public ViewName() {
    setSizeFull();
    VerticalLayout mainLayout = new VerticalLayout();
    setContent(mainLayout);

然后我有许多不同的布局（HorizontalLayout、GridLayout）或组件，例如 Label 作为组件添加到 mainLayout。对于 HorizontalLayouts，我经常执行以下操作以使用屏幕的全宽：

hLayout.setWidth("100%");

我有很多图标、网格等。只要我不调整 window 的大小，一切都很好。当我将 window 调整为较小尺寸时，我变得一团糟（图标、文本等彼此重叠）并且没有水平滚动条。（但是，网格会出现水平滚动条。）我已经尝试了很多方法来解决这个问题。如果我添加

mainLayout.setSizeFull();

或

mainLayout.setWidth("100%");

我已经在大屏幕上看到了一团糟。我还按照 here 的描述尝试了 CSS 的 mainLayout。我有几个滚动条，但 none 是 window 本身！

唯一正确调整大小的组件是添加到 mainLayout 的标签，例如：

Label title = new Label("Some text",ContentMode.HTML);
    title.setWidth(100, Unit.PERCENTAGE);
    mainLayout.addComponent(title);
    mainLayout.setComponentAlignment(title, Alignment.MIDDLE_CENTER);

我还注意到 GridLayout 中的任何内容在调整大小后似乎都保留在原位但不可见，因为我没有滚动条。但是，HorizontalLayout 中的图标会相互重叠。

怎么了？拜托，我需要一个关于我应该使用哪种布局作为我的视图面板的主要布局的一般说明，如何调整组件的大小以及如何在必要时为主要 window 获得一个水平滚动条。

Answer 1

问题是您将 mainLayout 的宽度设置为视图的宽度。这意味着，您的 mainLayouts 宽度永远不会大于您的视图宽度。所以不会出现滚动条。

根据您发布的信息，将 mainLayouts 宽度更改为未定义应该可以解决问题。

 mainLayout.setWidth("-1px");

Vaadin 8 视图：window 调整大小时没有水平滚动条

Vaadin 8 View: No horizontal scrollbar on window resizing

layout

vaadin

window-resize

vaadin8