Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Empty space after layouts hidden in a mekshift tree component

    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:
    Code:
     @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;
    }
    Attached Files
    Last edited by pavel.benes; 25th Nov 2019, 07:11.

    #2
    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.

    Comment

    Working...
    X