Flex Canvas child Randomly resizes

Question

Hi!

I have an application with a viewstack that contains all the components that need to be displayed. The navigation is defined in the main application. All the components are based on canvas.

The main application looks like that:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*">
 <mx:VBox width="1024" height="100%" horizontalCenter="0" verticalGap="0" backgroundColor="#FFFFFF">
  <mx:Image id="header" verticalAlign="top" />
  <mx:ViewStack id="body" horizontalCenter="0" verticalCenter="0" width="100%" height="100%">
   <components:HomePage id="hp" width="100%"/>
   <components:CollectionSelection id="cs" width="100%"/>
   <components:SearchEngine id="se" width="100%"/>
   <components:SearchResult id="sr" width="100%"/>
   <components:Tray id="tr" width="100%"/>
   <components:Order id="or" width="100%"/>
  </mx:ViewStack>
  <mx:Image id="footer" verticalAlign="bottom" maintainAspectRatio="false" width="100%"/>
 </mx:VBox>
</mx:Application>

I'm getting a strange behaviour from the TRAY component.

Here's the code for component Tray (I've only left the display info):

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
 <mx:Image id="bg" 
  horizontalCenter="0" verticalCenter="0" 
  width="100%" height="100%" 
  maintainAspectRatio="false"/>

 <mx:HBox width="100%">
  <mx:Button x="20" y="20" label="BACK"/>
  <mx:Spacer width="100%"/>
  <mx:LinkBar 
   itemClick="linkbar_itemClick(event)"
   styleName="GLBLinkBTN"
   separatorColor="#FFFFFF"
   separatorWidth="1"
   >
   <mx:dataProvider>
    <mx:Object label="CLEAR"/>
    <mx:Object label="LOGOUT"/>
   </mx:dataProvider>
  </mx:LinkBar>
 </mx:HBox> 

 <mx:VBox id="mainBox" horizontalCenter="0" verticalCenter="0" verticalGap="0">
  <mx:HBox width="100%" height="50" backgroundColor="#60524D" verticalAlign="bottom" paddingBottom="5">
   <mx:Label styleName="TRTitle" paddingLeft="15"/>
   <mx:Spacer width="100%"/>
   <mx:Label styleName="TRItems" paddingRight="15"/>
  </mx:HBox>
  <mx:HorizontalList id="hlist"
   dataProvider="{TrayData.instance.itemsCollection}" 
   columnCount="{TrayData.instance.hlistColumns}"
   rowCount="1"
   itemRenderer="components.TrayItem"
   horizontalScrollPolicy="off"
   rollOverColor="#FFFFFF"
   selectionColor="#FFFFFF"
   horizontalCenter="0" verticalCenter="0"
   borderStyle="none"
   horizontalScrollPosition="{TrayData.instance.hsPosition}"
   />
  <mx:HBox width="100%" backgroundColor="#E7DDDB" height="40" verticalAlign="middle" paddingLeft="20" paddingRight="20">
   <mx:Box width="25" verticalAlign="middle" horizontalAlign="left">
    <mx:Button id="leftBtn" />
   </mx:Box>
   <mx:Spacer width="100%"/>
   <mx:Box width="25" verticalAlign="middle" horizontalAlign="right">
    <mx:Button id="rightBtn" />
   </mx:Box>
  </mx:HBox>
 </mx:VBox> 
</mx:Canvas>

All the components are displaying properly. However, sometimes, randomly, the vbox "mainBox" in the tray component is not displaying as it should: the horizontallist shrinks and instead of fully displaying its items, I get horizontal and vertical scrollbars for each item... I'm currently trying to reproduce this behaviour (to get a print screen) but right know, it's working fine... -_-' As soon as I get it work as it shouldn't, I'll upload an image.

Here's the code for the itemRenderer (just in case...):

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:HBox width="100%" paddingTop="0" paddingBottom="0" paddingRight="3">
  <mx:Spacer width="100%"/>
  <mx:Box width="14" height="14" verticalAlign="middle" horizontalAlign="center">
   <mx:Button width="8" height="8"/>
  </mx:Box>
 </mx:HBox>
 <mx:VBox paddingLeft="20" paddingRight="20" verticalGap="15" paddingBottom="15">
  <mx:Canvas id="thumbnail">
   <mx:Image id="thumbnailBG" />
   <mx:Image id="thumbnailIM" />
  </mx:Canvas >
  <mx:VBox width="100%" verticalGap="7">
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label paddingBottom="5"/>
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74"opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   </mx:VBox>
  <mx:Button />
 </mx:VBox>

</mx:VBox>

Your help would really be appreciated.

Regards, BS_C3

---

Hi! I finally got the random behaviour again. And here are some screen shots... The code hasn't changed...

This is the normal behaviour:

This is the random behaviour:

FI: I get the normal behaviour back when I do a refresh of the application.

Hope that this will help you understand my issue >_<

Regards.

Answer 1

Your "mainBox" doesn't have its width set to 100%, the way all the others do. This could cause those problems you're seeing. When you nest a bunch of containers, it only takes one to screw things up. Break one link in that chain and problems occur.