Vaadin 7 VerticalLay spacing problem

I have used borderlayout for vaadin,and used verticallayout in center,then i added two panel in this verticallayout,but the two panel have so much spacing between them! code like this:

private VerticalLayout getCenterPanel() {       
        VerticalLayout centerMainPanel = new VerticalLayout();
        centerMainPanel.setWidth("100%");
        centerMainPanel.setSpacing(false);
        centerMainPanel.setSizeFull();
        
        Panel centerToolBarPanel = new Panel();
        centerToolBarPanel.setCaption("Panel 1");
        centerToolBarPanel.setWidth("100%");
        
        Panel centerToolBarPanel1 = new Panel();
        centerToolBarPanel1.setCaption("Panel 2");
        centerToolBarPanel1.setWidth("100%");
        centerToolBarPanel1.setSizeFull();
        
        centerMainPanel.addComponent(centerToolBarPanel);
        centerMainPanel.addComponent(centerToolBarPanel1);
     
        return centerMainPanel;
    } 

and run app like the attachment,so how to fix this problem,thanks
16822.jpg

Your main Layout has a 100% height and contains 2 elements (your panels).
The space is evenly distributed between these two elements, each one getting 50% of the height.

What exactly do you want to achieve?

thanks for your reply, I hope that the two panels can close together,no space between them,how to fix?

Well the easiest way is to put a

setSizeFull(); not only to the second panel but also on the first one

i have changed my code like this,and show attachment 1.jpg,but i want to achieve like the attachment 2.jpg.
if i use setSizeFull(), it still do not work like 2.jpg

 private VerticalLayout getCenterPanel() {
        
        VerticalLayout centerMainPanel = new VerticalLayout();
        centerMainPanel.setSpacing(false);
        centerMainPanel.setSizeFull();
        
        Panel centerToolBarPanel = new Panel();
        centerToolBarPanel.setCaption("Panel 1");
        centerToolBarPanel.setWidth("100%");
        centerToolBarPanel.setHeight("100px");
        
        Panel centerToolBarPanel1 = new Panel();
        centerToolBarPanel1.setCaption("Panel 2");
        centerToolBarPanel1.setWidth("100%");
        centerToolBarPanel1.setHeight("100px");
        centerMainPanel.addComponent(centerToolBarPanel);
        centerMainPanel.addComponent(centerToolBarPanel1);
    
        return centerMainPanel;
    }

16823.jpg
16824.jpg


https://vaadin.com/forum#!/thread/1879087
i found this post
and added this for my code,it works fine.

centerMainPanel.setExpandRatio(centerToolBarPanel, 1);
centerMainPanel.setExpandRatio(centerTab, 12);

Hi Wang,

In the last post, what is actually centerTab? Is it the same as centerToolBarPanel1? Also, why are you trying to set the height of the both panels to 100 pixels, but still expand them? This does not make much sense. Maybe let the upper one (centerToolBarPanel) have height 100px and the panel below have 100%. After that, only do centerMainPanel.setExpandRatio(centerToolBarPanel, 1); and the upper panel should be 100 pixels, while the other panel takes up the rest of the room and also expands if your browser window resizes