03
Apr
08

Flex Panel’s Not Scrolling When Expected Fix

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>
Advertisements

6 Responses to “Flex Panel’s Not Scrolling When Expected Fix”


  1. June 25, 2008 at 12:21 pm

    Thank you very much for posting this. Since I didn’t want an actual Panel, I just used a Canvas (maybe that was obvious but I’m pretty new to flex). It worked great and saved me some time for sure.

  2. April 3, 2012 at 7:09 pm

    İstanbuldaki jigoloların telefon numaralarına ulaşabilirsiniz.

  3. July 30, 2012 at 6:31 pm

    İstanbul muhasebe kursları.

  4. May 14, 2013 at 10:33 pm

    Bayan escort servisi istanbul

  5. August 2, 2013 at 1:17 am

    I am genuinely thankful to the holder of this web site who has shared this impressive article at at this place.

  6. January 20, 2016 at 3:50 pm

    I am genuinely grateful to the holder of this site who has shared this enormous article at here.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: