Vaadin 8 View：调整窗口大小时没有水平滚动条

Question

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

public class ViewName extends Panel implements View {

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

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

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

hLayout.setWidth("100%");

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

mainLayout.setSizeFull();

或

mainLayout.setWidth("100%");

我已经在大屏幕上一团糟了。如here 所述，我还尝试了 mainLayout 的 CSS。我得到了几个滚动条，但窗口本身没有！

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

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

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

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

Answer 1

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

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

 mainLayout.setWidth("-1px");