Vaadin 7 - CSSLayout 中的组件对齐

Question

我有一个包含上部和下部的 VerticalLayout。 上半部分是一个 CssLayout。 CssLayout 本身包含两个部分，都是 Horizo​​ntalLayouts 我们称它们为 firstHL 和 secondHL。 我的问题是 secondHL 的内容与 firstHL 的内容不一致。在 firstHL 中还有更多的 Horizo​​ntalLayouts 和 Optiongroups。在 secondHL 中还有更多的 Horizo​​ntalLayouts 和 Listselects。无论出于何种原因 secondHL 内容的“顶部”是 firstHL 内容顶部下方的几个像素。

如果我使用 CssLayout 就是这种情况。如果我使用 Horizo​​ntalLayout 而不是 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

您可以在第二个HL布局中添加样式名称：

secondHL.addStyleName("secondHL");

把它放到你的styles.css中：

.secondHL {vertical-align: top}