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%");

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

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中的任何内容似乎都保留在原处，但是由于我没有滚动条，因此看不到。但是，HorizontalLayout中的图标会彼此重叠。

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

Answer 1

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

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

Yield

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

1 个答案: