Stacking multiple children inside of Viewport that take 100% of viewport height/width

[igaenssley]

Greeting,

I'm working on an application where I will need multiple layers as direct children of the viewport that take the viewport's height and width (just like a fit layout), but exist on different z-indexes.

I have attempted to create viewport with an absolute layout, with multiple children. Then, when the viewport is rendered, selected each of the children and set their dimensions to 100%. I also have this method called with the viewport is resized.

While this works for the direct children of the Viewport, specifying "layout:'fit'" on each of those children seems to have no effect on the layout of their own children. They take up only the amount of height that the component needs, instead of the height of their parent (which is a child of the viewport).

Card layout will not work because I do need to display multiple layers at the same time.

Is there a better method/pattern to handle this?

[skirtle]

Using 4.1 you can add multiple items to a fit layout and they will be stacked. There is a brief mention of this in the docs for fit layout but it doesn't go into details. For an example take a look at the desktop demo, which uses this technique for putting the wallpaper behind the icons of the desktop. It does require a small amount of CSS but it's reasonably straightforward.