I wouldn’t call this a fix, as this is more of a misunderstanding of the Panel component in Flex…simple yes, but it took myself and a coworker a couple minutes to figure it out.
We had a Panel component that sat inside a Container whose height was < the Panel’s height, and we expected the content’s of the Panel to scroll; unfortunately, the entire Panel scrolled so we sat down and created a small example to see how we could get around this.
Check out the following code — in the first Panel, we were hoping the contents (for example purposes TextInputs) would scroll, but instead the entire Panel scrolled. In the second example, we changed the layout property to a value of “absolute,” and this gave us the desired results — the content’s of the Panel scrolled. Note the use of a Box Container around the TextInputs — without this the TextInputs sat on top of each other since we’re telling the Panel to use a Canvas instead of a VBox to house it’s contents.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox width="100%" height="100%"> <mx:Box width="100%" height="100"> <mx:Panel width="100%" height="100%" title="Bad :: Unexpected Scrolling"> <!-- This Box is unnecessary since there's a VBox in a Panel by default, but it's here for consistency since it's necessary to get the second Panel to scroll as expected. --> <mx:Box> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> </mx:Box> </mx:Panel> </mx:Box> <mx:Box width="100%" height="100"> <!-- This Box is unnecessary since there's a VBox in a Panel by default, but since we've specifed the layout as absolute, it's a Canvas --> <mx:Panel width="100%" height="100%" title="Good :: Expected Scrolling" layout="absolute"> <mx:Box> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> <mx:TextInput /> </mx:Box> </mx:Panel> </mx:Box> </mx:VBox> </mx:Application>
Recent Comments