title: Flex Canvas child Randomly resizes
body: <p>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.</p>
  
  <p>The main application looks like that:</p>
  
  <pre><code>&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*"&gt;
   &lt;mx:VBox width="1024" height="100%" horizontalCenter="0" verticalGap="0" backgroundColor="#FFFFFF"&gt;
    &lt;mx:Image id="header" verticalAlign="top" /&gt;
    &lt;mx:ViewStack id="body" horizontalCenter="0" verticalCenter="0" width="100%" height="100%"&gt;
     &lt;components:HomePage id="hp" width="100%"/&gt;
     &lt;components:CollectionSelection id="cs" width="100%"/&gt;
     &lt;components:SearchEngine id="se" width="100%"/&gt;
     &lt;components:SearchResult id="sr" width="100%"/&gt;
     &lt;components:Tray id="tr" width="100%"/&gt;
     &lt;components:Order id="or" width="100%"/&gt;
    &lt;/mx:ViewStack&gt;
    &lt;mx:Image id="footer" verticalAlign="bottom" maintainAspectRatio="false" width="100%"/&gt;
   &lt;/mx:VBox&gt;
  &lt;/mx:Application&gt;
  </code></pre>
  
  <p>I'm getting a strange behaviour from the TRAY component.</p>
  
  <p>Here's the code for component Tray (I've only left the display info):</p>
  
  <pre><code>&lt;mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
   &lt;mx:Image id="bg" 
    horizontalCenter="0" verticalCenter="0" 
    width="100%" height="100%" 
    maintainAspectRatio="false"/&gt;
  
   &lt;mx:HBox width="100%"&gt;
    &lt;mx:Button x="20" y="20" label="BACK"/&gt;
    &lt;mx:Spacer width="100%"/&gt;
    &lt;mx:LinkBar 
     itemClick="linkbar_itemClick(event)"
     styleName="GLBLinkBTN"
     separatorColor="#FFFFFF"
     separatorWidth="1"
     &gt;
     &lt;mx:dataProvider&gt;
      &lt;mx:Object label="CLEAR"/&gt;
      &lt;mx:Object label="LOGOUT"/&gt;
     &lt;/mx:dataProvider&gt;
    &lt;/mx:LinkBar&gt;
   &lt;/mx:HBox&gt; 
  
   &lt;mx:VBox id="mainBox" horizontalCenter="0" verticalCenter="0" verticalGap="0"&gt;
    &lt;mx:HBox width="100%" height="50" backgroundColor="#60524D" verticalAlign="bottom" paddingBottom="5"&gt;
     &lt;mx:Label styleName="TRTitle" paddingLeft="15"/&gt;
     &lt;mx:Spacer width="100%"/&gt;
     &lt;mx:Label styleName="TRItems" paddingRight="15"/&gt;
    &lt;/mx:HBox&gt;
    &lt;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}"
     /&gt;
    &lt;mx:HBox width="100%" backgroundColor="#E7DDDB" height="40" verticalAlign="middle" paddingLeft="20" paddingRight="20"&gt;
     &lt;mx:Box width="25" verticalAlign="middle" horizontalAlign="left"&gt;
      &lt;mx:Button id="leftBtn" /&gt;
     &lt;/mx:Box&gt;
     &lt;mx:Spacer width="100%"/&gt;
     &lt;mx:Box width="25" verticalAlign="middle" horizontalAlign="right"&gt;
      &lt;mx:Button id="rightBtn" /&gt;
     &lt;/mx:Box&gt;
    &lt;/mx:HBox&gt;
   &lt;/mx:VBox&gt; 
  &lt;/mx:Canvas&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's the code for the itemRenderer (just in case...):</p>
  
  <pre><code>&lt;mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" &gt;
   &lt;mx:HBox width="100%" paddingTop="0" paddingBottom="0" paddingRight="3"&gt;
    &lt;mx:Spacer width="100%"/&gt;
    &lt;mx:Box width="14" height="14" verticalAlign="middle" horizontalAlign="center"&gt;
     &lt;mx:Button width="8" height="8"/&gt;
    &lt;/mx:Box&gt;
   &lt;/mx:HBox&gt;
   &lt;mx:VBox paddingLeft="20" paddingRight="20" verticalGap="15" paddingBottom="15"&gt;
    &lt;mx:Canvas id="thumbnail"&gt;
     &lt;mx:Image id="thumbnailBG" /&gt;
     &lt;mx:Image id="thumbnailIM" /&gt;
    &lt;/mx:Canvas &gt;
    &lt;mx:VBox width="100%" verticalGap="7"&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label paddingBottom="5"/&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74"opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;mx:HBox width="100%" height="13"&gt;
      &lt;mx:Label width="74" opaqueBackground="#ECE5E2"/&gt;
      &lt;mx:Label /&gt;
     &lt;/mx:HBox&gt;
     &lt;/mx:VBox&gt;
    &lt;mx:Button /&gt;
   &lt;/mx:VBox&gt;
  
  &lt;/mx:VBox&gt;
  </code></pre>
  
  <p>Your help would really be appreciated.</p>
  
  <p>Regards,
  BS_C3</p>
  
  <hr>
  
  <p>Hi! I finally got the random behaviour again.
  And here are some screen shots...
  The code hasn't changed...</p>
  
  <p>This is the normal behaviour:</p>
  
  <p><a href="http://www.freeimagehosting.net/uploads/d1df2950af.png" rel="nofollow noreferrer">alt text http://www.freeimagehosting.net/uploads/d1df2950af.png</a></p>
  
  <p>This is the random behaviour:</p>
  
  <p><a href="http://www.freeimagehosting.net/uploads/fcf1a603f4.png" rel="nofollow noreferrer">alt text http://www.freeimagehosting.net/uploads/fcf1a603f4.png</a></p>
  
  <p>FI: I get the normal behaviour back when I do a refresh of the application. </p>
  
  <p>Hope that this will help you understand my issue >_&lt;</p>
  
  <p>Regards.</p>