Emulation - percentHeight behaves differently

[yishayw]

In Flex, setting height of 100% on object A does not necessarily mean it stretches to the size of its container B, whereas in Royale this is always the case.

In this example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.apache.org/royale/spark"
	xmlns:mx="library://ns.apache.org/royale/mx"
	width="100%" height="100%">

    <fx:Script>
    <![CDATA[
        
    ]]>
    </fx:Script>
	<mx:HBox height="100%" width="100%">
		<mx:Box width="20%" height="100%">
			<mx:Canvas backgroundColor="red" width="100%" height="100%"/>
		</mx:Box>
		<mx:Box width="60%" height="100%">
			<mx:Canvas backgroundColor="green" width="100%" height="1800" />
		</mx:Box>
		<mx:Box width="20%" height="100%">
			<mx:Canvas backgroundColor="blue" width="100%" height="100%"/>
		</mx:Box>
	</mx:HBox>
</mx:Application>

The Flex example will show all canvases (red, green, and blue) stretching to a height of 1800 pixels, but in Royale, only the green canvas is sized to 1800 pixels, whereas the rest remain the size of the screen.

[greg-dove]

I will look into this, I have spent a great deal of time working on improving the emulation layouts (and will create a new branch for review soon). IIRC the Box layouts have a branch for handling a 'single' child situation (presumably optimized compared to the multiple children scenario) and I suspect the issue is in this code.

[greg-dove]

I looked into this.
I must say this Flex behavior does not make intuitive sense to me, and the Royale behavior seems more correct IMO. There are only top-down percent-based Container constraints that request "percentage of space in the parent". There is nothing here as a container that says to me: "size to content", so I would intuitively expect to see scrollbars on the Box containing the oversized Canvas. I'd be keen to see something somewhere that describes the intended behavior in Flex in this case. Maybe I just got used to how things are in Royale, but I don't recall dealing with this in Flex in the past (although, it has been a while...).

The reason that the Flex version of the BoxLayout 'breaks' out of the percent-based sizing is because of measuredMinHeight being 1800 at the HBox level and downwards during layout phase (similar to the issue we saw with measuredMinHeight in the PanelInternalContainer).

If you swap the mx:Box items to mx:Canvas items then the behavior in Flex is as it is currently in Royale with mx:Box. I don't really understand why a mx:Box with a single child is behaving so differently to a mx:Canvas with a single child in Flex (with the same percent-based sizing)... and whether this is intentional or is a bug.

[yishayw]

It's been a while for me as well since I got into the docs relating to Flex's layout.

This excerpt from Flex_4.6_help.pdf may provide a clue

Determining container size
Flex uses the following basic rules, in addition to the basic component sizing rules, to determine the size of a container:
•
A percentage-based container size is advisory. Flex makes the container large enough to fit its children at their minimum sizes. For more information on percentage-based sizing, see
“Using percentage-based sizing” on
page
373
.