新組件被放置在中間而不是另一個在Vaadin VerticalLayout

我有Vaadin邊欄菜單的問題，我有導航欄是50px高度。我希望放置邊欄（此時只有帶按鈕的VerticalLayout），可以放置屏幕的其餘部分。問題是，當我加入我的側邊欄主要佈局從屏幕中間開始， like this:新組件被放置在中間而不是另一個在Vaadin VerticalLayout

我試圖用

setSizeFull();

方法上我的主要佈局，但那麼它看起來like that（甚至當我設置我的側邊欄高度爲100％）

還有就是我的側邊欄後面的代碼：

公共類側邊欄{

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); 
}

最後導航欄背後：

公共類導航欄{

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

任何想法？

來源

2015-11-06 Zeezl

如果一個VerticalLayout的高度爲100％，它將與所有包含的組件均分共享該空間，除非您設置擴展比率。您可以通過verticalLayout.setExpandRatio(secondComponent, 1.0f)告訴垂直佈局，以便爲一個組件提供全部空間。這將會把你的第一個組件摺疊到它所需要的房間，並將第一個組件從第一個到最後一個都給予第二個組件。

來源

2015-11-07 10:47:55 cfrick

template.addComponent（sidebar.initSidebar（））; template.setExpandRatio（sidebar.initSidebar（），1.0f）; – Zeezl

我得到了給定的組件不是這個佈局錯誤的子集 – Zeezl

爲什麼你調用兩次「initSidebar」？ – cfrick

新組件被放置在中間而不是另一個在Vaadin VerticalLayout

回答

相關問題