Tamil
Tamil

Reputation: 1173

Flex 4 scroller with group. Scrollbars not showing up

I know I have done this before but every time I work with scrollers and group it doesn't work for me and kills my 2 days.

<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
    <s:Group clipAndEnableScrolling="true">...... ..... </s:Group></s:Scroller>

This is what I have. I have components inside my group with is more than enough to bring scrollers even on a big monitor. But I am not getting any scrollbars.

Kindly tell me what is that I am doing wrong here. because everytime I fix it and I struggle for the next time.

Thanks.

Upvotes: 2

Views: 5817

Answers (3)

user1891130
user1891130

Reputation: 11

The Same code given by "Raja Jaganathan" itself will work with small modification on scroll parent height and width

Capabilities.screenResolutionX, Capabilities.screenResolutionY will give you the browser width and height respectively.

Upvotes: 1

Tamil
Tamil

Reputation: 1173

Thank you for all your responses. After setting the minHeight it now works. I am able to achieve the scrollbars as expected (make it look like browser's scroll bar). Below is the code snippet

<s:Scroller width="100%" maxHeight="{this.height}"> <s:VGroup width="100%" minHeight="1000" height="100%" paddingLeft="40" paddingRight="40" paddingTop="0" > ..</s:VGroup></s:Scroller>

Kindly let me know if there is a better approach.

Upvotes: 2

Raja Jaganathan
Raja Jaganathan

Reputation: 36127

Try with this

Your scroller parent container need to set non-percentage height/width.

<s:BorderContainer width="120" height="100" backgroundColor="#FFFFFF">
    <s:Scroller width="100%" height="100%">
        <s:Group>
            <s:layout>
                <s:VerticalLayout horizontalAlign="justify"
                                  clipAndEnableScrolling="true" />
            </s:layout>
            <s:Button label="button (1)" />
            <s:Button label="button (2)" />
            <s:Button label="button (3)" />
            <s:Button label="button (4)" />
            <s:Button label="button (5)" />
            <s:Button label="button (6)" />
        </s:Group>
    </s:Scroller>
</s:BorderContainer>

Upvotes: 5

Related Questions