Huge space between vaadin panels
java, vaadin
Solution
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.
Problem
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); ```