Huge space between vaadin panels

Question

This piece of code that I wrote creates 2 panels. The aim is to have one of them directly on top of the other with no space in between, but the problem is that there is a huge gap between them.

Cann anyone help me out with this?

Code:

        Panel panel = new Panel();
        Panel Logo = new Panel();

        VerticalLayout layout1 = new VerticalLayout();
        VerticalLayout layout2 = new VerticalLayout();
        panel.setWidth("500px");
        panel.setHeight("300px");
        Logo.setWidth("500px");
        Logo.setHeight("100px");
        Logo.addStyleName(Runo.PANEL_LIGHT);
        Label label = new Label("test");
        label.setWidth(null);
        Button test = new Button("test");
        first.setStyleName("test");;
        first.setClickShortcut(KeyCode.ENTER, null);

        layout1.addComponent(test);
        layout2.addComponent(label);
        layout.addComponent(Logo);
        layout.addComponent(panel);
        layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
        layout1.setComponentAlignment(test, Alignment.MIDDLE_CENTER);
        layout2.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
        layout.setSizeFull();
        layout1.setSizeFull();
        layout2.setSizeFull();
        setContent(layout);
        panel.setContent(layout1);
        Logo.setContent(layout2);

Abbas · Accepted Answer · 2014-06-05T23:55:49.447

10

It depends on the type of layout, which you have set to full size. Your layout will expand as much as the browser itself. What happens is that if your layout is a VerticalLayout, its height is 100% but it only has two panels with heights of 300 and 100, respectively. Since you did not specify any expand ratio, Vaadin assigns 50% of the screen to the panel and the other 50% to the Logo, hence you get a big gap in between.

To fix it, you can do two things:

Don't use layout.setSizeFull(); Instead, use layout.setSizeUndefined();
Play with expand ratio, so that the top panel gets less space and Logo gets more space: layout.setExpandRatio(panel, 0.2f); and layout.setExpandRatio(Logo, 0.8f);. The problem with this approach is that in case your browser height is less than 400 pixels, your layout will be cut off.

It took me a while and many trial/errors to learn this concept. Make sure you carefully read this page before going forward.

edited Jun 05 '14 at 23:55

answered Jun 05 '14 at 19:50

Abbas

3,228
1
23
27

1

You typoed the name of the expand ratio method. It's "Ratio" not "Ration". – jupenur Jun 05 '14 at 22:57
Hey thanks for the help! layout.setSizeUndefined(); did the trick, but the components are all stuck to the left now and alignment does not work. Do you know why? – user3702643 Jun 07 '14 at 02:08
1

That's because their enclosing parents (`layout1` and `layout2`) are full size, i.e. their width and height are 100%. To fix that, just set the size of `layout1` and `layout2` undefined as well (`layout1.setSizeUndefined();`). In addition, I believe you don't really need `layout1` and `layout2` anyways. Just add `panel` and `Logo` directly under `layout`. – Abbas Jun 07 '14 at 06:51
1

A good way to see what you can do to make your layouts look exactly the way you want is to inspect the HTML code of the resulting page in Chrome or Safari and play with height and width to get the right layout. – Abbas Jun 07 '14 at 06:53
"Make sure you carefully read this page before going forward." - really worth reading. – Line Apr 26 '18 at 08:18

score 2 · Answer 2 · answered Jun 06 '14 at 07:32

There are two ways to do this :

as @Abbas said use

layout.setExpandRatio(panel, float);
or you can add a property in the css file:

layout.setStyleName("my-layout");

in css you add :

.v-verticallayout-my-layout .v-slot{
  height: auto !important;
}

This will do the job. I've tried both methods and they worked.

Huge space between vaadin panels

2 Answers2