HLayout: how to stretch elements vertically to match the highest member?

[robikz]

Hi

I have a HLayout with multiple forms that are stacked one against another and then a few one atop another (using inner VLayouts). The forms are wrapped in groupboxes with appropriate labels. See the attached pictures, because they explain it better.

I wish to:

1. There is no fixed height for the main HLayout.
2. The overall height of the HLayout should be determined by the height required by the highest (most populated) of the forms.
3. All other forms should then be stretched vertically to consume the available vertical space.

I have created a mockup in Qt that shows what I wish to achieve. It works there by default:

The M1 form in this example is the highest one and thus is the one that determines the height of the whole main layout.

Unfortunately, I can't achieve that in SmartGWT. In SmartGWT the layout members take only as much space as they personally need and they don't stretch to accommodate the whole height, even if I setHeight100() on them.


I can "fix" this problem by settings the height of the main HLayout to a fixed value (such as `setHeight(222)`), but this is not what I want. I want the main HLayout to be only as high as necessary to accommodate the highest form, then let other forms stretch to fill the available space. How can I do that?

import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;

public class LayoutWoes extends Canvas {
    public LayoutWoes() {
        this.setBackgroundColor("#e0ffe0");
        this.setHeight100();
        this.setWidth100();

        Layout main = new HLayout();
        main.setID("main_layout");
        //main.setHeight(250); // fixes the problem, but I don't want to have a fixed height here!
        main.setShowEdges(true);
        main.setLayoutMargin(10);
        main.setMembersMargin(10);
        main.setBackgroundColor("#ffe0e0");

        Layout m0 = new VLayout();
        m0.setMembersMargin(10);
        m0.setBackgroundColor("burlywood");

        Layout m0a = new VLayout();
        m0a.setGroupTitle("M0 A");
        m0a.setIsGroup(true);
        m0a.setLayoutMargin(10);
        m0a.setMembersMargin(10);
        DynamicForm form0a = new DynamicForm();
        form0a.setItems(new TextItem("f0ai1", "Item 1"));
        m0a.addMember(form0a);
        m0.addMember(m0a);

        Layout m0b = new VLayout();
        m0b.setGroupTitle("M0 B");
        m0b.setIsGroup(true);
        m0b.setLayoutMargin(10);
        m0b.setMembersMargin(10);
        m0b.setHeight100();
        DynamicForm form0b = new DynamicForm();
        form0b.setItems(new TextItem("f0bi1", "Item 1"));
        m0b.addMember(form0b);
        m0.addMember(m0b);

        main.addMember(m0);

        Layout m1 = new VLayout();
        m1.setGroupTitle("M1");
        m1.setIsGroup(true);
        m1.setLayoutMargin(10);
        m1.setMembersMargin(10);
        m1.setBackgroundColor("cyan");

        DynamicForm form1 = new DynamicForm();
        form1.setItems(
            new TextItem("f1i1", "Item 1"),
            new TextItem("f1i2", "Item 2"),
            new TextItem("f1i3", "Item 3"),
            new TextItem("f1i4", "Item 4"),
            new TextItem("f1i5", "Item 5")
        );
        m1.addMember(form1);

        main.addMember(m1);

        Layout m2 = new VLayout();
        m2.setGroupTitle("M2");
        m2.setIsGroup(true);
        m2.setLayoutMargin(10);
        m2.setMembersMargin(10);
        m2.setHeight100(); // has absolutely no effect
        m2.setBackgroundColor("yellow");

        DynamicForm form2 = new DynamicForm();
        form2.setItems(
            new TextItem("f2i1", "Item 1"),
            new TextItem("f2i2", "Item 2"),
            new TextItem("f2i3", "Item 3")
        );
        m2.addMember(form2);

        main.addMember(m2);

        Label m3 = new Label("just a label");
        m3.setBackgroundColor("lime");
        main.addMember(m3);

        addChild(main);
        RootPanel.get().add(this);
    }
}

Browser: Mozilla Firefox 113.0.1 (64-bit)
Browser: Google Chrome Version 113.0.5672.126 (Official Build) (64-bit)
SmartClient Version: v12.1p_2020-08-07/LGPL Development Only (built 2020-08-07)

[Isomorphic]

If you know which of your forms will be the tallest, you can use layout.setMinBreadthMember(). If not, you can draw the forms first and measure them, and then set the minBreadthMember (or the layout height). You could also read the docs on LayoutPolicy, which describes solutions to this situation.

[robikz]

Thank you for an exceptionally fast reply. setMinBreadthMember() is an acceptable solution. It still forces me to consider which form will be the tallest and I always need to remember to update it accordingly if the composition of the individual forms changes, but still this is better than what I had before.