Resizing layout up to maxHeight, then use scrolling

[admin@seacomp.cz]

Hi,

This has most likely some simple solution, since the desired effect can be achieved with HTML + CSS pretty easily.

I have a parent layout with multiple children layouts. I want for height of parent layout to be sum of heights of children layouts up to some point and then fix the size of parent layout and enable scrolling (only vertical scrolling).

There is variable amount of children layouts and their size can change based on user actions or masterLayout width (change size or visibility).

I was trying something like

masterLayout = new VLayout();
masterLayout.setAutoHeight();
masterLayout.setMaxHeight(300);
masterLayout.setOverflow(Overflow.AUTO);

//for each child
masterLayout .addMember(childLayout);

setMaxHeight seems to have no effect. Without setOverflow(Overflow.AUTO) masterLayout just grows over the limit. with setOverflow(Overflow.AUTO) the size of master layout is shrinked to 1px.


SmartGWT version - 6.0-p20161023

[Isomorphic]

You need to have an overflow:visible container as the parent layout, then one more outer container around that which is overflow:"auto". Size the overflow:"auto" container to the max size (at which scrolling should begin).

[admin@seacomp.cz]

Thanks for quick reply however this doesn't seem to work.

masterLayout = new VLayout();
masterLayout.setOverflow(Overflow.VISIBLE);

VLayout wrapper = new VLayout();
wrapper.setOverflow(Overflow.AUTO);
wrapper.setMaxHeight(300);
wrapper.addMember(masterLayout);

//add wrapper to its parent

//for each child
masterLayout.addMember(childLayout);

results in wrapper having 1 px height. If setHeight is used instead of setMaxHeight, then the height is always 300px. Desired behavior would be that smaller children result in smaller parent and introduce scroll bar after 300px is reached.

eg. :
1 children 100px => wrapper 100px
2 children 100px each => wrapper 200px
2 children 200px each => wrapper 300px + scroll bar

The fact that the size or wrapper is fixed on 300 px causes problems with positioning of following elements. When the height is 1 px the content cannot be seen.


Can this behavior be caused by the fact that there is an element which has setHeight100()? It is a sibling of parent of wrapper and it is required to fill the rest of the window.

[Isomorphic]

If you need the scrolling element to "shrink wrap" the contained content you can instead make it initially overflow:visible, and add a ResizedHandler to the contained parent element that sets the overflow of the scrolling element to "auto" when a threshold size is reached (and back to "visible" if not, so that shrinking causes scrollbars to disappear again).