Flex 4.5 List control springing to top?

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"> <fx:Script> <![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"]); ]]> </fx:Script> <s:ViewNavigator label="Broken" width="100%" height="100%" firstView="views.BrokenView"/> <s:ViewNavigator label="Fixed" width="100%" height="100%" firstView="views.FixedView"/> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> </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"> <fx:Script> <![CDATA[ import mx.core.FlexGlobals; ]]> </fx:Script> <s:List dataProvider="{FlexGlobals.topLevelApplication.demo}" width="100%" /> </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"> <fx:Script> <![CDATA[ import mx.core.FlexGlobals; ]]> </fx:Script> <s:List dataProvider="{FlexGlobals.topLevelApplication.demo}" width="100%" height="100%" /> </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 developer advocate. He focuses on JavaScript, serverless 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

Comments