Новый компонент размещен в середине вместо другого в Vaadin VerticalLayout

Question

У меня проблема с меню боковой панели в Ваадине, у меня есть панель навигации высотой 50 пикселей. Я хочу разместить боковую панель (на данный момент просто VerticalLayout с кнопками), которая займет остальную часть экрана. Проблема заключается в том, когда я добавляю боковая панель в основной раскладке он начинается с середины экрана, like this:

Я пытался использовать

setSizeFull(); 

метод на моей основной макет, но тогда это выглядит like that (даже когда я установить свою высоту боковой панели до 100%)

Там есть код позади боковой панели:

общественного класса Sidebar {

private VerticalLayout sidebar; 
private Button menuItem01; 
private Button menuItem02 = new Button("Item02"); 

//Create Sidebar 
public VerticalLayout initSidebar() { 
    sidebar = new VerticalLayout(); 
    sidebar.setWidth("10%"); 
    sidebar.setHeight("100%"); 
    sidebar.setMargin(false); 
    sidebar.addComponent(createMenuItem()); 
    sidebar.addComponent(menuItem02); 
    sidebar.addStyleName("sidebar"); 
    return sidebar; 
} 

public Button createMenuItem(){ 
    menuItem01 = new Button("Item01"); 
    return menuItem01; 
} 

}

И есть код позади моего MainView

@Override 
protected void init(VaadinRequest vaadinRequest) { 
    template.setMargin(false); 
    template.setSpacing(false); 
    //template.setSizeFull(); 

    //Place all elements together 
    template.addComponent(navigationBar.initNavigationBar()); 
    //template.addComponent(mainContent.initMainPanel()); 
    template.addComponent(sidebar.initSidebar()); 

    this.setContent(template); 
} 

Наконец NavBar при необходимости:

общественного класса {

Панель навигации

private HorizontalLayout navbar; 
private Button hamburgerButton; 
private Label logo; 

//Create Navigation Bar 
public HorizontalLayout initNavigationBar() { 
    navbar = new HorizontalLayout(); 
    navbar.setWidth("100%"); 
    navbar.setMargin(true); 
    navbar.setHeight(50, Sizeable.Unit.PIXELS); 
    navbar.addComponent(createHamburgerButton()); 
    navbar.addComponent(createLogo()); 
    navbar.addStyleName("navigation-bar"); 
    return navbar; 
} 

//Create Hamburger Button 
public Button createHamburgerButton() { 
    hamburgerButton = new Button(); 

    //Added some styling to hamburger button 
    hamburgerButton.addStyleName("hamburger-button"); 
    hamburgerButton.setIcon(VaadinIcons.MENU); 

    return hamburgerButton; 
} 

//Create ElenX logo 
public Label createLogo() { 
    logo = new Label("ElenX"); 
    logo.addStyleName("elenx-logo"); 
    logo.setWidthUndefined(); 
    logo.setEnabled(false); 
    return logo; 
} 
} 

Есть идеи?

Answer 1

Если VerticalLayout имеет высоту 100%, он будет разделять пространство со всеми содержащимися компонентами одинаково, если вы не установите коэффициенты расширения. Вы можете сказать, что вертикальная компоновка дает всю комнату одному компоненту через verticalLayout.setExpandRatio(secondComponent, 1.0f). Это разрушит ваш первый компонент только в той комнате, в которой он нуждается, и даст второе - от первого до самого нижнего.