CODEWITHSUNDEEP
javalayoutvaadinvaadin8
Dawid Fieluba
Dawid Fieluba

Reputation: 1301

Vaadin -layout resizing overlaps

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: enter image description here

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

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

After resizing: enter image description here

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):

effect I would like to achieve

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

}

Upvotes: 2

Views: 1673

Answers (1)

Steffen Harbich
Steffen Harbich

Reputation: 2749

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.

Upvotes: 1

Related Questions