height: 100% broken for children of StackContainer

[ben hockey]

r29904 introduces an extra div around children of StackContainer?. this breaks previous layouts where the child had styling of height: 100%;. i've attached a test case where this happens.

[ben hockey]

applying height: 100%; to that wrapper node fixes this problem. i wonder if that is the correct solution for this.

[ben hockey]

aargh! height: 100%; doesn't work unless it's only applied to the wrapper of the currently selected child because otherwise the "hidden" wrappers still have height: 100%.

[ben hockey]

using _hideChild and _showChild we can apply and remove height: 100%; to page._wrapper - this seems to be working for me.

[bill]

I see... yes it requires users to change their custom CSS, but what do you suggest?

[bill]

PS: why are you setting height: 100% on a StackContainer child. Isn't it StackContainer's job to set the height on its children?

[ben hockey]

Attachment (16394.diff) added by ticket reporter.

[ben hockey]

Replying to bill:

PS: why are you setting height: 100% on a StackContainer child. Isn't it StackContainer's job to set the height on its children?

i find that CSS does (or did) a pretty good job setting the height ;)

StackContainer? won't set the height if the child does not have a resize method and the CSS did everything i needed - with less code.

anyhow, what i'm suggesting is in the patch i've attached.

[bill]

OK. Perhaps StackContainer should be showing/hiding the wrapper node, instead of the child widget. In that case you could keep your old CSS.

[ben hockey]

i had thought of it showing and hiding the wrapper but that still won't do it (unless you also somehow set the height of the wrapper to 100%) because the wrapper needs to expand to the height of the container so that the domNode of the child widget can expand to the same height.

[bill]

Well, you could set the height of the wrapper to 100% yourself, in CSS, similar to what you've been doing all along. My point was that the wrapper's height doesn't need to be changed dynamically; it can stay at 100% whether or not the pane is selected.

[ben hockey]

yes - that would probably be good enough.

[bill]

In [30088]:

Hide and show StackContainer's child's wrapper, rather than child itself, to allow app to do CSS styling of children and their wrappers to height: 100%.

Also fixing setting of aria-label. It shouldn't be set on the node unless there's a label defined (otherwise you end up with aria-label="undefined", and also need to worry about escaping special characters.

Fixes #16394, refs #16242, #16244 !strict

[bill]

In [30132]:

fix test failure caused by [30088], refs #16394

[bill]

In [30136]:

fix test failure caused by [30088], refs #16394