Empty space after layouts hidden in a mekshift tree component

[pavel.benes]

Hello Isomorphic,

I'm trying to implement a tree component of my own using layouts and such (not using your TreeGrid or such).
So what I have is a bunch of nodes represented by a Layout that can contain children in a Vlayout associated with it.
When a node label is clicked, the container with its children is hidden/shown (visibility toggle).

The problem that I'm facing right now is some leftover space that is left behind when I collapse the last node.
The children container is hidden but the space is still 'occupied' by the hidden container as if it wasn't hidden (this doesn't necessarilly have to be the last node but any node with enough children to make the childrenContainer high enough).

Since I thought that hidden elements do not take up any space, there has to be something that I'm missing here.

SmartClient Version: v12.0p_2019-04-10/Pro Deployment (built 2019-04-10) (a bit older, I know...)

Thanks for any reply.

test case:

 @Override public void onModuleLoad() {    
VLayout outer = new VLayout();
   outer.setWidth(500);
   outer.setHeight(600);
   outer.setBorder("1px solid red");
   outer.addStyleName("outer");

    VLayout scrollLayout = new VLayout();
   scrollLayout.setWidth100();
   scrollLayout.setHeight100();
   scrollLayout.setOverflow(Overflow.AUTO);

    for(int i=0; i<5; i++)
      scrollLayout.addMember(getNestedLayout());

    outer.addMember(scrollLayout);
   outer.draw();
}  

private Layout getNestedLayout()
{
   VLayout nodeContainer = new VLayout();
   nodeContainer.setWidth100();
   nodeContainer.setAutoHeight();

    // collapsible layout with children
   HLayout collapsibleLayout = new HLayout();
   collapsibleLayout.setWidth100();
   collapsibleLayout.setAutoHeight();

   LayoutSpacer indent = new LayoutSpacer();
   indent.setWidth(25);
   indent.setHeight100();
   collapsibleLayout.addMember(indent);

    VLayout childrenContainer = new VLayout();
   childrenContainer.setWidth100();
   childrenContainer.setAutoHeight();

    // populate the container with children
   for(int i=0; i<12; i++)    {
      Label child = new Label("Child");
      child.setWidth100();
      child.setHeight(56);
      child.setBorder("1px dashed black");
      childrenContainer.addMember(child);

}
   collapsibleLayout.addMember(childrenContainer);

   Label nodeLabel = new Label("Parent");
   nodeLabel.setWidth100();
   nodeLabel.setHeight(25);
   nodeLabel.setHeight(56);
   nodeLabel.setBorder("1px solid black");
   nodeLabel.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent clickEvent) {
         collapsibleLayout.setVisible(!collapsibleLayout.isVisible());
      }
   });

    nodeContainer.addMember(nodeLabel);
   nodeContainer.addMember(collapsibleLayout);
   return nodeContainer;
}

[Isomorphic]

Hidden elements do take up space, that’s how HTML works in general.

You can either move the hidden elements to negative coordinates or use hideUsingDisplayNone.