Flex 4.5 List control springing to top?

This post is more than 2 years old.

When I first began playing with Flex 4.5 mobile controls, I noticed something odd with the Spark List control. If the amount of data was bigger than the screen, it would "spring" back when your finger left the control. You could scroll down - sure - but the second you let go of the control it scrolled back to the top. I have no idea why this fixes it, but if you simply add height="100%" to your list, it corrects the issue. It doesn't seem to do anything visually to the output at all, but it corrects it immediately. Here is a simple example. First, my top level file will define a list that two sub views will use:

<?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">

&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var demo:ArrayCollection = new ArrayCollection([
	"Apple",
	"Banana",
	"Beer",
	"Garbage",
	"Wine",
	"Ray",
	"Jeanne",
	"Zoid",
	"CFSilence",
	"Adrok",
	"dfgrump",
	"Rinaldi",
	"Greg",
	"Phones",
	"Are",
	"Little",
	"Miniature",
	"Spy",
	"Camera"]);
	
]]&gt;
&lt;/fx:Script&gt;

&lt;s:ViewNavigator label="Broken" width="100%" height="100%" firstView="views.BrokenView"/&gt;
&lt;s:ViewNavigator label="Fixed" width="100%" height="100%" firstView="views.FixedView"/&gt;
&lt;fx:Declarations&gt;
	&lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
&lt;/fx:Declarations&gt;

</s:TabbedViewNavigatorApplication>

Here is the broken view - it will exhibit the behavior I described above:

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Broken">

&lt;fx:Script&gt;
	&lt;![CDATA[
		import mx.core.FlexGlobals;
		
	]]&gt;
&lt;/fx:Script&gt;

&lt;s:List dataProvider="{FlexGlobals.topLevelApplication.demo}" width="100%"  /&gt;

</s:View>

And here is the good version. The only difference is the addition of the height.

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Fixed">

&lt;fx:Script&gt;
&lt;![CDATA[
import mx.core.FlexGlobals;

]]&gt;
&lt;/fx:Script&gt;

&lt;s:List dataProvider="{FlexGlobals.topLevelApplication.demo}" width="100%" height="100%"  /&gt;

</s:View>

I've attached the FXP if you want to play with this yourself.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Steven Shongrunden posted on 5/30/2011 at 2:02 AM

The mobile spark List has "bounce/pull" effects built into it by default (similar to iOS). This means that as you scroll into negative or excess space an animation will play to bring the content back into view. At the top of the List this means returning verticalScrollPosition to zero, and at the bottom of the List this means returning verticalScrollPosition to (contentHeight - height).

Currently the way to toggle bounce/pull effects is tied to the scroll policies on that List. The default mobile spark List skin sets verticalScrollPolicy="on" and horizontalScrollPolicy="auto". This means that the List will always allow vertical scrolling and always have bounce/pull effects in that direction regardless of the content height. It also means that horizontal scroll and bounce/pull will not be enabled unless the content width is larger than the width.

It sounds like you don't want to have bounce/pull when no scrolling is needed. In that case you should set verticalScrollPolicy="auto".

If you would like an API to turn off bounce/pull effects altogether please vote for this enhancement: http://bugs.adobe.com/jira/...

Check out Joan's post on enabling bounce/pull in a List with a horizontal lay: http://butterfliesandbugs.w...

The spec for bounce/pull has a little more information: http://opensource.adobe.com...

And the spec for mobile scrolling might be useful:
http://opensource.adobe.com...

Comment 2 by Raymond Camden posted on 5/30/2011 at 2:31 AM

While I believe you are correct about the reason behind this, it is not exactly my issue. My list _was_ longer then the view. I wasn't scrolling _past_ the end of the list, I was scrolling in general. Try my 'bad' example. You can see the list is longer then the view. Just try to scroll it a bit and as soon as you let go, it snaps back. To me, that's a bug. I can't imagine why anyone would wan _that_ particular behavior.

Comment 3 by Steven Shongrunden posted on 5/30/2011 at 3:50 AM

The List being larger than the View doesn't enable scrolling. What is needed is for the List's content size to be larger than its size. You can't see it because your device's screen size isn't large enough, but you actually are scrolling beyond the end of the List. Notice in the case when you set height="100%" on the List you see the bottom border of the List, but when you don't set a size you can't see it. This is because the size of the List is extending off screen.

Does that make sense?

The snapping behavior you are seeing is the default behavior in this case in native iOS and BlackBerry PlayBook applications.

Comment 4 by Raymond Camden posted on 5/30/2011 at 6:20 PM

Hmm. It _kinda_ makes sense. I'll be honest - it isn't your description that is lacking but my brain cells. ;)

So - there is a logical reason for this. This blog entry still makes sense though - right? I know I ran into this and was confused, and I've seen others run into it as well.

Comment 5 by Ike posted on 8/21/2014 at 8:13 PM

Thanks, I hit this exact same problem and your fix was the solution.