Resizebar 1px height between HLayout members

[costy]

Hi Isomorphic,

Here is my problem.
I have an HLayout with two members.
I want a resizebar between the two members.
The parent HLayout must adapt to the heighest member, it is an item in SectionStackSection.
I tried using setAutoHeight on HLayout but this create a 1px height resizebar.
Without autoHeight, the resizeBar has a height less than the height of the HLayout.
In the test case, without autoHeight, the resizebar has a fixed height (250px) less than the 300px of the tabset.


Can you give me the right solution ?
How can i resolve this design ?

Here is the test case.
It was tested with the last night build : SmartGWT v12.0p_2019-09-08/LGPL

        TextItem text1 = new TextItem("text1", "Text item 1");
        TextItem text2 = new TextItem("text2", "Text item 2");

        DynamicForm theForm = new DynamicForm();
        theForm.setFields(text1, text2);

        DynamicForm form2 = new DynamicForm();
        TextItem text3 = new TextItem("text3", "Text item 3");
        TextItem text4 = new TextItem("text4", "Text item 4");
        form2.setFields(text3, text4);

        Tab tab = new Tab("tab1");
        tab.setPane(form2);

        TabSet ts = new TabSet();
        ts.setWidth(200);
        ts.setHeight(300);
        ts.addTab(tab);
        ts.setShowTabBar(true);
        ts.setShowResizeBar(true);

        HLayout theLayout = new HLayout();
        theLayout.setAutoHeight();
        theLayout.setMembersMargin(10);
        theLayout.addMember(ts);
        theLayout.addMember(theForm);

        theLayout.draw();

Best regards,
costy

[Isomorphic]

If what you want is for an HLayout to force all members to match the width of another member, you can use the layout.minBreadthMember setting to do that.

[costy]

Not exactly, I have an HLayout with two members. Each member is a DynamicForm with AutoHeight.
I want HLayout to be autoheight also.
It is working, but in this case the resizebar between the two dynamicForms is 1px height.

I tried without autoheight on HLayout, in this case the resizebar has a fixed height, smaller than the height of HLayout.
Easily to reproduce with the test case joined.

[Isomorphic]

Again, see minBreadthMember. The HLayout's breadth axis is the height axis. Although the HLayout expands to allow the TabSet and DynamicForm to be seen (this is the effect of the default overflow:visible setting plus your autoHeight setting), the Layout itself is still sized to a minimum value and this determines the height of the resizeBar. If you set minBreadthMember to a member that you want to determine the height of the Layout, the resizeBar will reflect that height.

[Isomorphic]

Note that the purpose of a Layout is to manage the member's sizes. The most straightforward approach here is to simply put the 300 height on the Layout and then none of the members need a height, and you also don't have to use minBreadthMember. This is also less code, faster, and easier to maintain.

[costy]

Thank you Isomorphic for your response.
setMinBreathMember or setHeight are possible when i know the height of each member.
Or i don't have the height of the member. DynamicForm are customized
Is there a way to calculate the size of each member ? A callback when all members are drawn ?

[Isomorphic]

setMinBreathMember allows you to identify the one flexible-sized member on the breadth axis that all other components should match. Then you can set the Layout's overall height to what you want the components to have if the minBreadthMember doesn't need more space.

If you have more than one member that might get larger than the Layout's default size, then yes, you need to allow the Layout to draw, then check multiple members to see which is largest, and set the Layout to that size. This starts to become inefficient as multiple components need to be drawn, then resized and perhaps redrawn after their initial draw.

However, having to do any of this suggests that you may want to revisit your design, because what you've got is one flexible-sized component forcing other components to take up more space, and the other components may not be able to make use of the space, they are growing just to visually match in size. That's poor use of available screen space, and you may get better use of space by introduce scrolling or rearranging components, for example.