Flex Scroll Bars expected on child hbox – but on application instead?

I wrestled with this for a few days so I’m posting it here in hopes that it will help someone.  For whatever reason I had a really difficult time finding out the solution – to something that should have been very basic.  Here is a sample application where one would expect that the scroll bars would appear on the child mx:HBox:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:mx="library://ns.adobe.com/flex/halo"  layout="vertical"
                    minWidth="800"
                    minHeight="600">
     <fx:Script>
          <![CDATA[
               [Bindable]
               private var dp:Array = new Array(30);

          ]]>
     </fx:Script>
     <mx:HDividedBox width="100%" height="100%">
          <mx:Panel width="15%" height="100%">
               <mx:Label text="left"/>
          </mx:Panel>
          <mx:Box id="content" width="85%" height="100%" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" >
               <mx:Repeater dataProvider="{dp}">
                    <mx:Label text="hello!" />
               </mx:Repeater>
          </mx:Box>
     </mx:HDividedBox>
</mx:Application>

I would have expected the HBox#content to have scroll bars, instead the scroll bars show up on the main application – why I have not figured out. However the solution (hack?) is to simply wrap the HBox#content in a mx:Canvas tag and put the width, height, and scrollbar settings there. Here is my solution (Let me know if you have a beter one!) :


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:mx="library://ns.adobe.com/flex/halo"  layout="vertical"
                    minWidth="800"
                    minHeight="600">
     <fx:Script>
          <![CDATA[
               [Bindable]
               private var dp:Array = new Array(30);

          ]]>
     </fx:Script>
     <mx:HDividedBox width="100%" height="100%">
          <mx:Panel width="15%" height="100%">
               <mx:Label text="left"/>
          </mx:Panel>
          <mx:Canvas width="85%" height="100%" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" >
           <mx:Box id="content" >
               <mx:Repeater dataProvider="{dp}">
                    <mx:Label text="hello!" />
               </mx:Repeater>
          </mx:Box>
       </mx:Canvas>
     </mx:HDividedBox>
</mx:Application>

Leave a Reply

Your email address will not be published. Required fields are marked *