Vaadin - 布局调整重叠大小

当尝试调整浏览器大小时，我面临与我的项目重叠的问题。 我尝试了很多不同的变体来使其发挥作用，但结果仍然不可接受。

Before resizing:

A, B and C包含在垂直布局 https://vaadin.com/api/com/vaadin/ui/VerticalLayout.html- 我会打电话给它root.

• Root在里面水平布局 https://vaadin.com/api/com/vaadin/ui/HorizontalLayout.html- 内容UI.
• A是简单的组件。
• B正在扩展包含 2 的 VerticalLayout水平布局 https://vaadin.com/api/com/vaadin/ui/HorizontalLayout.html在里面。
• C只是一个组成部分 -Grid https://vaadin.com/docs/-/part/framework/components/components-grid.html.

现在，当我尝试调整浏览器大小时（如箭头所示）C开始抢其他元件的地方。

After resizing:

我想要达到的效果是我的网格（C）并没有尝试适应我的浏览器。它不应该移动，而只是隐藏 - 如下所示（绿色显示实际可见的部分）：

    /*ROOT class that extends VerticalLayout*/
    private void init()
    {
        super.setSizeFull();

        addA();
        addB();
        addC();
    }

    private void addA()
    {
        Label header = new Label();

        super.addComponent(header);
        super.setComponentAlignment(header, Alignment.MIDDLE_CENTER);
    }

    private void addB()
    {
        layoutB.setSizeFull();
        layoutB.setWidth("92%");
        super.addComponentsAndExpand(layoutB);
        super.setExpandRatio(layoutB, 0.3f);
        super.setComponentAlignment(layoutB, Alignment.MIDDLE_CENTER);
    }

    private void addC()
    {
        grid.setSizeFull();
        grid.setColumnReorderingAllowed(true);

        grid.setWidth("92%");
        super.addComponentsAndExpand(grid);
        super.setExpandRatio(grid, 0.6f);
        super.setComponentAlignment(grid, Alignment.BOTTOM_CENTER);
    }

如你看到的C添加方式与B， 但只有C正在移动。预先感谢您的任何帮助！

我正在使用 Vaadin 8。

@Edit:

@SpringUI(path = "/ui")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) 
{
    Workspace workspace = new Workspace();

    HorizontalLayout root = new HorizontalLayout();
    root.setSizeFull();
    root.addComponentsAndExpand(workspace);

    setContent(root);
}

public class Workspace extends Panel
{
    public Workspace()
    {
        init();
    }

    private void init()
    {
        setSizeFull();
        addStyleName(ValoTheme.PANEL_BORDERLESS);

        VerticalLayout layout = new VerticalLayout();
        // by default width 100% and height undefined in Vaadin 8
        setContent(layout);

        // component A
        Label label = new Label("Test1");
        layout.addComponent(label);

        // component B
        HorizontalLayout bar = new HorizontalLayout();
        bar.addComponents(new Label("Label 1"), new Label("Label 2"));
        layout.addComponent(bar);

        // component C
        Grid<MyBean> grid = new Grid<>(MyBean.class);
        grid.setCaption("My Grid:");
        grid.setHeight("1000px");
        //grid.setHeightByRows(50); // same as fixed height
        List<MyBean> items = new LinkedList<>();
        IntStream.range(1, 100).forEach(i -> items.add(new MyBean("Item " + i)));
        grid.setItems(items);
        layout.addComponent(grid);
    }
}

    public static class MyBean {
        private String name;
        public MyBean(String name) { this.name = name; }
        public String getName() { return name; }
        public void setName(String name) { this.name = name; }
    }

}

看看这个工作示例：

@SpringUI(path = "/ui")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) {
    Panel panel = new Panel();
    panel.addStyleName(ValoTheme.PANEL_BORDERLESS);
    panel.setSizeFull();

    VerticalLayout layout = new VerticalLayout();
    // by default width 100% and height undefined in Vaadin 8
    panel.setContent(layout);

    // component A
    Label label = new Label("Test1");
    layout.addComponent(label);

    // component B
    HorizontalLayout bar = new HorizontalLayout();
    bar.addComponents(new Label("Label 1"), new Label("Label 2"));
    layout.addComponent(bar);

    // component C
    Grid<MyBean> grid = new Grid<>(MyBean.class);
    grid.setCaption("My Grid:");
    grid.setHeight("1000px");
    //grid.setHeightByRows(50); // same as fixed height
    List<MyBean> items = new LinkedList<>();
    IntStream.range(1, 100).forEach(i -> items.add(new MyBean("Item " + i)));
    grid.setItems(items);
    layout.addComponent(grid);

    setContent(panel);
}

public static class MyBean {
    private String name;
    public MyBean(String name) { this.name = name; }
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
}

}

The Grid具有固定的高度（按像素或按行数）。不需要扩展比率VerticalLayout。内的布局Panel将根据其子组件的需要而增长。如果高度大于可用空间Panel然后显示滚动条。