Question

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

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

Vaadin 7 - CSSLayout中的组件对齐

1 个答案: