CODEWITHSUNDEEP
layoutalignmentvaadinvaadin7
Sanyifejű
Sanyifejű

Reputation: 2740

Vaadin 7 - Component alignment in CSSLayout

I have a VerticalLayout that contains an upper and a lower part. The upper part is a CssLayout. The CssLayout itself contains two parts, both are HorizontalLayouts let's call them firstHL and secondHL. My problem is that the content of secondHL is not aligned to the content of firstHL's. In firstHL there are further HorizontalLayouts and Optiongroups. In secondHL there are also further HorizontalLayouts and Listselects. From whatever reason the "top" of the content of secondHL is a good couple of pixels below the top of the content of firstHL.

That is the case if I use CssLayout. If I use HorizontalLayout instead of CSSlayout this alignment problem disappears. But I believe I need CssLayout for dynamic sizing (i.e. on large screen firstHL and secondHL are next to each other, on small screen they are below each other)

So I see two possible directions: 1, finding out how to align the content of CssLayout
or 2, replace CssLayout with something that makes dynamic sizing possible AND keeps proper alignment.

Any advice is appreciated. Here is the what I did so far:

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;
}

Upvotes: 1

Views: 3322

Answers (1)

Krayo
Krayo

Reputation: 2510

You can add a style name to the secondHL layout:

secondHL.addStyleName("secondHL");

and put this into your styles.css:

.secondHL {vertical-align: top}

Upvotes: 3

Related Questions