Vaadin 7 - Выравнивание компонентов в CSSLayout

Question

У меня есть VerticalLayout, который содержит верхнюю и нижнюю части. Верхняя часть - CssLayout. Сам CssLayout содержит две части: оба HorizontalLayouts позволяют называть их firstHL и secondHL. Моя проблема заключается в том, что содержимое secondHL не совпадает с содержимым firstHL. В firstHL есть еще HorizontalLayouts и OptionGroups. В SecondHL есть еще и HorizontalLayouts и Listselects. По какой-то причине «верх» содержимого второго HL является хорошей парой пикселей ниже верхней части содержимого firstHL.

В этом случае, если я использую CssLayout. Если я использую HorizontalLayout вместо CSSlayout, эта проблема выравнивания исчезнет. Но я считаю, что мне нужен CssLayout для динамической калибровки (то есть на большом экране firstHL и secondHL находятся рядом друг с другом, на маленьком экране они находятся ниже друг друга)

Итак, я вижу два возможных направления: 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}