我需要8个视图：窗口大小调整时没有水平滚动条

Posted 2021-05-06

我有一个Vaadin 8应用程序，有几个视图。

public class ViewName extends Panel implements View {

VerticalLayout作为面板中的主要布局。

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

然后我有许多不同的布局（Horizo​​ntalLayout，GridLayout）或组件（如Label）作为组件添加到mainLayout。对于Horizo​​ntalLayouts，我经常使用以下内容来使用屏幕的整个宽度：

hLayout.setWidth("100%");

我有很多图标，网格等。只要我不调整窗口大小，一切都很好。当我将窗口调整到一个小尺寸时，我会弄得一团糟（图标，文字等在彼此的顶部）并且没有水平滚动条。 （但是，网格得到水平滚动条。）我已经尝试了很多东西来解决这个问题。如果我加

mainLayout.setSizeFull();

要么

mainLayout.setWidth("100%");

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

正确调整大小的唯一组件是添加到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中的图标彼此重叠。

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

答案

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

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

 mainLayout.setWidth("-1px");