Vaadin布局调整大小重叠 [英] Vaadin -layout resizing overlaps

问题描述

尝试调整浏览器大小时，我的项目遇到重叠问题.我尝试了许多不同的变体来使其正常运行，但结果仍然不可接受.

调整大小之前:

A ， B 和 C 包含在

我想达到的效果是我的Grid( C )没有尝试适合我的浏览器.它不应该移动，而只是隐藏-如下所示(绿色显示的是实际可见的部分):

 /*扩展VerticalLayout的ROOT类*/私有无效init(){super.setSizeFull();addA();addB();addC();}私有无效addA(){标签标题=新标签()；super.addComponent(header);super.setComponentAlignment(header，Alignment.MIDDLE_CENTER);}私有无效addB(){layoutB.setSizeFull();layoutB.setWidth("92％");super.addComponentsAndExpand(layoutB);super.setExpandRatio(layoutB，0.3f);super.setComponentAlignment(layoutB，Alignment.MIDDLE_CENTER);}私有无效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.

@

  @SpringUI(path ="/ui")公共类MyUI扩展了UI {@Override受保护的无效init(VaadinRequest请求){工作区工作区= new Workspace();Horizo​​ntalLayout根=新的Horizo​​ntalLayout();root.setSizeFull();root.addComponentsAndExpand(工作区);setContent(root);}公共类Workspace扩展Panel{公共工作区(){在里面();}私有无效init(){setSizeFull();addStyleName(ValoTheme.PANEL_BORDERLESS);VerticalLayout布局=新的VerticalLayout();//默认情况下，宽度100％和高度在Vaadin 8中未定义setContent(layout);//组件A标签label =新Label("Test1");layout.addComponent(label);//组件BHorizo​​ntalLayout条=新的Horizo​​ntalLayout();bar.addComponents(new Label("Label 1")，new Label("Label 2"));layout.addComponent(bar);//组件C网格< MyBean>网格=新网格(MyBean.class);grid.setCaption(我的网格:");grid.setHeight("1000px");//grid.setHeightByRows(50);//与固定高度相同列出< MyBean>项目=新的LinkedList<>();IntStream.range(1，100).forEach(i-> items.add(new MyBean("Item" + i)));grid.setItems(items);layout.addComponent(grid);}}公共静态类MyBean {私有字符串名称；public MyBean(String name){this.name =名称；}public String getName(){返回名称；}public void setName(String name){this.name = name;}}} 

解决方案

看看这个工作示例:

  @SpringUI(path ="/ui")公共类MyUI扩展了UI {@Override受保护的无效init(VaadinRequest请求){Panel panel = new Panel();panel.addStyleName(ValoTheme.PANEL_BORDERLESS);panel.setSizeFull();VerticalLayout布局=新的VerticalLayout();//默认情况下，宽度100％和高度在Vaadin 8中未定义panel.setContent(layout);//组件A标签label =新Label("Test1");layout.addComponent(label);//组件BHorizo​​ntalLayout条=新的Horizo​​ntalLayout();bar.addComponents(new Label("Label 1")，new Label("Label 2")));layout.addComponent(bar);//组件C网格< MyBean>网格 = 新网格<>(MyBean.class);grid.setCaption(我的网格:");grid.setHeight("1000px");//grid.setHeightByRows(50);//与固定高度相同列出< MyBean>项目=新的LinkedList<>();IntStream.range(1，100).forEach(i-> items.add(new MyBean("Item" + i)));grid.setItems(items);layout.addComponent(grid);setContent(panel);}公共静态类MyBean {私有字符串名称；public MyBean(String name){this.name =名称；}public String getName(){返回名称；}public void setName(String name){this.name = name;}}} 

Grid 具有固定的高度(按像素或按行数). VerticalLayout 不需要扩展比例. Panel 中的布局将根据其子组件的需要而增长.如果高度大于 Panel 的可用空间，则会显示滚动条.

Im facing overlaps problem with my project when trying to resize browser. I was trying so many different variations to make it work, but still result is not acceptable.

Before resizing:

A, B and C are contained in VerticalLayout - I will call it root.

• Root is inside HorizontalLayout - content of UI.
• A is simple component.
• B is extending VerticalLayout that contains 2 HorizontalLayouts inside.
• C is only one component - Grid.

Now, when Im trying to resize my browser (like arrow shows) C is starting to steal other components place.

After resizing:

The effect I would like to achieve is that my Grid (C) is not trying to fit my browser. It should not move, and just hide - like below (green is showing actually visible part):

    /*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);
    }

As you can see C is added in the same way as B, but only C is moving. Thanks in advance for any help!

Im using 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; }
    }

}

解决方案

Have a look at this working example:

@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 has a fixed height (either by pixels or by number of rows). No expand ratios are necessary for the VerticalLayout. The layout within the Panel will grow as needed by its child components. If the height is greater than the space available for the Panel then scroll bars are shown.

这篇关于Vaadin布局调整大小重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！