[FLEX-31] Box sizing issue with width 100% and height higher then the height of the page and scrollbars

• Type: Bug
• Status: Closed
• Priority: Minor
• Resolution: Later
• Affects Version/s: Adobe Flex SDK Previous
• Fix Version/s: Adobe Flex SDK Previous
• Component/s: mx: Box View
• Environment: Affected OS(s): All OS Platforms; Affected OS(s): All OS Platforms; Language Found: English
• Assignee: Adobe JIRA
• Reporter: Adobe JIRA
• Created: 17/Sep/06 20:43
• Updated: 10/May/11 16:30
• Resolved: 18/Jan/08 14:43

Description

I want a header spreading the whole width of the browser screen. As soon as the content of the box is higher then the box height, the Flex page scrollbar appears: now there is a margin at the left, which is not expected/desired.

Please check Margin.mxml in attachment, which isolates the problem.

Manish provided the following feedback by email: "This is certainly a bug. Also note how the horizontal scrollbar isn't required in the first place--the Canvas should automatically resize to fit."

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#000000"
width="100%" height="100%"
paddingLeft="0" paddingTop="0" paddingRight="0" paddingBottom="0"
>

<mx:states>
<mx:State id="bigger" name="bigger">
<mx:RemoveChild target="

{bigButton}

" />
<mx:AddChild relativeTo="

{myCanvas}" position="lastChild">
<mx:Button id="returnButton" label="Go back" click="currentState='';" y="0" />
</mx:AddChild>
<mx:AddChild relativeTo="{myCanvas}

" position="lastChild">
<mx:Text text="<< We now have a margin on the left hand side" y="30" />
</mx:AddChild>
<mx:SetProperty target="

{myCanvas}

" name="height" value="2500" />
</mx:State>
</mx:states>

<mx:Canvas width="100%" height="100" id="myCanvas" backgroundColor="#e0e0e0">
<mx:Button id="bigButton" label="Click me to see the bug" click="currentState='bigger';" />
</mx:Canvas>

</mx:Application>

SIMPLE CODE EXAMPLE:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<!-- <mx:VBox horizontalAlign="center" width="100%">-->

<mx:HBox backgroundColor="#00CCFF" width="100%">
<mx:Label text="LABEL" fontSize="15" fontWeight="bold"/>
</mx:HBox>
<mx:TextArea height="800" width="200"/>

<!-</mx:VBox>->

</mx:Application>