Vaadin 7 - 在CSSLayout

Question

元器件對準我有一個包含一個上部和一個下部的VerticalLayout的。 上半部分是一個CssLayout。 CssLayout本身包含兩個部分，都是Horizo​​ntalLayout，我們稱它們爲firstHL和secondHL。 我的問題是secondHL的內容沒有與firstHL的內容對齊。在firstHL中還有更多的Horizo​​ntalLayouts和Optiongroups。在secondHL中還有更多的Horizo​​ntalLayouts和Listselects。無論出於何種原因，第二HL內容的「頂部」是firstHL內容頂部以下的好幾個像素。

情況是這樣，如果我用CssLayout。如果我使用Horizo​​ntalLayout而不是CSSlayout，則此對齊問題會消失。但我相信我需要CssLayout進行動態尺寸調整（即在大屏幕上第一個HL和第二個HL彼此相鄰，在小屏幕上它們彼此相對）

所以我看到兩個可能的方向： 1，找出如何對齊CssLayout的內容
或 2，將CssLayout替換爲可以動態調整大小並保持正確對齊的內容。

任何意見表示讚賞。 這裏是我做的事至今：

protected void init(VaadinRequest request) { 
    VerticalLayout vertic = new VerticalLayout(); 

    CssLayout upper = new CssLayout(); 
    //HorizontalLayout upper = new HorizontalLayout(); 

    Component firstHL = firstHL(); 
    upper.addComponent(firstHL); 

    Component secondHL = secondHL(); 
    upper.addComponent(secondHL); 

    // IT is not possible FOR CssLAyouts!!! 
    //upper.setComponentAlignment(first, Alignment.TOP_LEFT); 
    //upper.setComponentAlignment(sec, Alignment.TOP_RIGHT); 

    vertic.addComponent(upper); 
    vertic.setSizeFull(); 
    vertic.setExpandRatio(upper, 0); 
    setContent(vertic); 
} 

private HorizontalLayout firstHL() { 
    HorizontalLayout hl = new HorizontalLayout(); 
    hl.addComponent(firstA()); 
    hl.addComponent(firstB()); 
    return hl; 
} 

private Component firstA() { 
    //Panel panel = new Panel("FirstA"); 
    HorizontalLayout hl = new HorizontalLayout(); 
    hl.setCaption("FIRST A"); 
    OptionGroup period = new OptionGroup("Period"); 
    period.addItem("DAY"); 
    period.addItem("WEEK"); 
    period.addItem("MONTH"); 
    period.addItem("YEAR"); 

    hl.addComponent(period); 

    OptionGroup hierarchyLevel = new OptionGroup("Level"); 
    hierarchyLevel.addItem("A"); 
    hierarchyLevel.addItem("B"); 
    hierarchyLevel.addItem("C"); 
    hierarchyLevel.addItem("D"); 
    hierarchyLevel.addItem("F"); 
    hierarchyLevel.addItem("G"); 

    hl.addComponent(hierarchyLevel); 

    hl.setMargin(true); 
    hl.setSpacing(true); 
    //panel.setContent(hl); 

    return hl; 
} 

private Component firstB() { 
    //Panel panel = new Panel("FirstB"); 
    HorizontalLayout hl = new HorizontalLayout(); 
    hl.setCaption("FIRST B"); 
    OptionGroup period = new OptionGroup("Period"); 
    period.addItem("DAY"); 
    period.addItem("WEEK"); 

    hl.addComponent(period); 

    OptionGroup hierarchyLevel = new OptionGroup("Level"); 
    hierarchyLevel.addItem("A"); 
    hierarchyLevel.addItem("B"); 

    hl.addComponent(hierarchyLevel); 

    hl.setMargin(true); 
    hl.setSpacing(true); 
    //panel.setContent(hl); 

    return hl; 
} 

private HorizontalLayout secondHL() { 

    HorizontalLayout hl = new HorizontalLayout(); 


    Component c = secondA(); 
    hl.addComponent(c);  

    Component cc = secondB(); 
    hl.addComponent(cc); 

    return hl; 
} 



private Component secondA() { 
    //Panel panel = new Panel("SECOND A"); 
    HorizontalLayout hl = new HorizontalLayout(); 
    hl.setCaption("SECOND A"); 
    ListSelect select = new ListSelect("Path"); 

    select.addItem("A"); 
    select.addItem("B"); 
    select.addItem("C"); 
    select.addItem("D"); 
    select.addItem("E"); 

    select.setMultiSelect(true); 
    select.setNullSelectionAllowed(true); 
    select.setRows(5); 

    hl.addComponent(select); 
    hl.setMargin(true); 
    hl.setSpacing(true); 
    //panel.setContent(hl); 

    return hl; 
} 


private Component secondB() { 
    //Panel panel = new Panel("SECOND B"); 
    HorizontalLayout hl = new HorizontalLayout(); 
    hl.setCaption("SECOND B"); 
    hl.addComponent(new DateField("Start date")); 
    hl.addComponent(new DateField("End date")); 
    hl.setMargin(true); 
    hl.setSpacing(true); 
    //panel.setContent(hl); 

    return hl; 
} 

Answer 1

您可以將樣式名稱到secondHL佈局添加：

secondHL.addStyleName("secondHL"); 

，並把這個到您的styles.css：

.secondHL {vertical-align: top}