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}