How to use scroller containing two forms in adobe flex?

Question

I have layout with two forms. I'm using scroller but scrollbars don't align to window but appear somewhere in the middle of the application screen.

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Scroller width="601" height="539">

<s:Group >

<s:Form  x="5" y="10" >
    <s:FormItem width="265" label="Name:" textAlign="right">
        <s:TextInput width="150"/>
    </s:FormItem>
            ...
</s:Form>
<s:Form x="300" y="10">
    <s:FormItem width="265" label="Color:" textAlign="right">
        <s:TextInput width="150"/>
    </s:FormItem>
            ...
</s:Form>

</s:Group>
</s:Scroller>
</s:WindowedApplication>

Below You can see screen-shot of my app. There is no scrollbars at the borders.

View of the application

Here is the screen-shot with scroller set to width and height to 300 pixels. As You can see the scrollbar is not attached to window.

view of smaller application

Provide two images, hope this will help in answering this question :) — pixel, Jan 03 '12 at 22:07

score 1 · Accepted Answer · answered Jan 04 '12 at 00:58

If you want the scroll bar on the right, to be on the right of the window, then set the width to 100%. Same for the height.

if you want the whole WindowedApplication to scroll, enable scrolling on the WindowedApplication in the properties tab, or add a canvas that is full width and height.

score 1 · Answer 2 · answered Jan 04 '12 at 07:59

try to modify the code like this :

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   width="100%" height="100%">
<s:Scroller width="100%" height="100%">
<!--... the rest of the code-->

it should be worked.

How to use scroller containing two forms in adobe flex?

2 Answers2