VerticalLayout height and trees

Hi all,

I have a verticallayout (vlTest) which contains another verticallayout(treeTest) and a simple label (l). Here is the simple code:

   [code]

VerticalLayout vlTest = new VerticalLayout();

    Label l = new Label("Any component");
    l.setSizeUndefined();
    
    Tree t;
    
    String prefix="any_text_very_largeeeeeeeeeeeeeeeeeeeeeeeeeeeeee ";
    
    VerticalLayout treeTest = new VerticalLayout();
    
    for(int j = 0; j < 4; j++) {
        
         t = new Tree();
         t.addItem("parent "+j);
        for (int i = 0; i < 100; i++) {
            
            t.addItem(prefix+i);
            t.setParent(prefix+i,"parent "+j);
            t.setChildrenAllowed(prefix+i, false);
            
            treeTest.addComponent(t);
        }
    }
    treeTest.addStyleName("treeTest");
    vlTest.addStyleName("vlTest");
    vlTest.addComponent(treeTest);
    vlTest.addComponent(l);

[/code]

And the css

.vlTest{
    max-width: 200px;
    height:100%;
}

.treeTest{
    max-width: 200px;
    max-height:100%;
/* max-height:500px;*/
     overflow-y:auto;
     overflow-x:auto;
    
}

vl is within a horizontallayout (maincontainer) with setsizefull() so its height is also 100%

When executing, it appears 4 trees collapsed and, the label consecutive. Ok for now. The problem happens when it comes to expand any of the trees, since it contains 100 elements and the height of the vl increase more than the maincontainer (the whole screen) so label is not shown anymore.

This issue is resolved if I set up the treeTest to an absolute height (i.e 500px), but i need to do this with relative positions (attach this behaviour)

What I need is to have the previous scenarios and when clicking a parent tree happens the following:

  • The label should move to the bottom of the visible screen,
  • A scrollbar (x and y) should come up

I’ve tried to use a setHeight(“100%”) in vlTest, but as you know, vaadin assign, in this case, 50% per treeTest and 50% for the label, so I used the expandratio (vltest.setexpandratio(treeTest,1f) and this way makes treeTest and label are together, however the behaviour is still wrong, visualizing like attach2.png

Please find attached 3 png images where you have the initial scenario in the attach1.png, the bad behaviour in the attach2.png and the expected behaviour in the attach3.png but with an absolute height (and I need a relative/percentage approach)

Many thanks! any help will be appreciated.

Regards,
Ruben

21465.png
21466.png
21467.png

Hi!

The first thing that comes to mind is to replace the treeTest layout with a new Panel in your vlTest layout, move the treeTest styles to that new panel, set the treeTest layout’s height to undefined, and set the treeTest layout as the panel’s content. Then, whenever the contents no longer fit the panel thanks to expanding the tree, scrollbars should happen automatically. I don’t have an opportunity to test this myself right now, but should work along those lines.

Many thanks Anna for answering!

I cannot replace the treeTest layout as a Panel (instead of a verticallayout) since this panel cannot contain more than one tree…(the content of a given panel is unique). I’ve tried to insert the treeTest verticallayout within a new panel but the result was the same (maybe this latest approach was what you were meaning?)

Maybe I don’t understand well your approach. Could you please write some code of your explanation? thanks again!

Hi!

Actually, when I tried this out and saw how the elements actually behave I realised you don’t even need the Panel, you can use the VerticalLayout’s default slot to get the scrollbars. Easier to do that way, even, since your size handling happens mostly in css, and you have most of the work there already. It’s just slightly in the wrong place. So basically you only need to change that .treeTest in your styles into .v-slot-treeTest and it should work. Your previous version didn’t because nothing limited the slot element from growing just as big as it wanted, so the 100% height there was measured against an already too big element. You could also just as well use max-width: 100% for that .v-slot-treeTest since the .vlTest max-width already sets the 200px limit.

Thanks a lot!

Almost got it! Indeed, setting style as a .v-slot-treeTest rather than .treeTest “solve” the problem. But other issue comes up due to this (see attach.png). As you can see, the label “anyComponent” appears on the red footer now and should be above it. I mean, treeTest has a MAX height of 100% (I understand is the maximum, and it’s calculated basing on the rest of components which are below), so, if there are any components below the tree (like a label in this case or whatever) should fix within the 100% of height vlTest space (and not exceed the red footer), shouldn’t they?

I’ve tried to put max-height to 90% but it’s not a good solution since if I have more components than a single label I have the same problems (there comes a moment that those components exceed the red footer)

Hope you understand my issue now! Many thanks again!

Cheers,
Ruben
21703.png

Hi!

Your red footer isn’t included in your example code/styles, can’t say what goes wrong there based on the pic alone.

Hi!

Sorry, you’re right. It’s quite hard to know it without coding :). However, forget the red footer, it’s much easier. Now there’s no red footer, now this vltest is inside a HorizontalLayout (let’s call hl) which is setsizefull() and this hl is inside another CssLayout which is also setsizefull() (let’s call cl). So, if I delete the red footer, the label “any component” does not appear on the screen (It looks like was hidden below). Find attach a pic to see it.

Many thanks once again!
21704.png

Hi!

I’m afraid I still can’t reproduce the issue. I suspect you have some conflicting styling somewhere, but what and where I have no idea.

Thanks anyway Anna.

I don’t know if I have some conflicting on the style, but what’s clear is with a new project vaadin 7 on Eclipse (from scratch) happens the same. If you remove the button example and add the previous code for adding the tree and the label and setting the layout given with setsizefull(), same result is happened, I mean, the label disappears from the screen…so weird…

Any other idea? thanks!

Hi!

My bad, my outer layout had a margin and I didn’t notice that it gave the label just enough space to not get hidden. Have to think about this further.

Hi!

I’m afraid I didn’t come up with any new css tricks during the weekend, maybe someone else has a better idea. My next attempt would be to either abandon the idea of the bottom component being always right below the tree (extra space above instead of below), or to switch to client-side so that you can actually ask element heights and do the size calculations there.

Many thanks anyway Anna!

I have used a 50% size for treeTest to have enough space for the rest of components in the being time.

Cheers,
Ruben