Apache Royale Jewel How to use ScrollableSectionContent into ScrollableSectionContent?

Question

I have something like this :

<j:initialView>
    <j:ResponsiveView>
        <j:ApplicationMainContent width="100%" selectedContent="ssc1">
            <j:ScrollableSectionContent name="ssc1" width="100%" /*also tried height="600"*/ >
                <j:Card height="600" width="200">
                    <j:Label text="A"/>
                    <j:Label text="B"/>
                    <j:ScrollableSectionContent width="100%" height="50">
                        <j:Label text="0"/>
                        <j:Label text="1"/>
                        <j:Label text="2"/>
                        <j:Label text="3"/>
                        <j:Label text="4"/>
                        <j:Label text="5"/>
                        </j:ScrollableSectionContent>
                    <j:Label text="C"/>
                </j:Card>
            </j:ScrollableSectionContent>
        </j:ApplicationMainContent>
    </j:ResponsiveView>
</j:initialView>

I don't understand why it isn't working. The above exemple show only ABC :

How to do to have inside a j:Card a 50px height scroll view (to show 0,1,2,3,4,5 in a scrollable content in my example) ?

I want the parent container to be ScrollableSectionContent because if I set browser windows lower than 600px I want to be able to scroll browser windows content to show Card content

Regards

Answer 1

SectionContent (and ScrollableSectionContent) is not visible by default. The original purpose was to use it for navigation, so we create all and only make visible the selected one.

So you need to set isSelected="true" to make it visible.

Maybe we can make it visible by default and then when used in navigation container make invisible...

If you want to just have a scrollable zone, you can add one of the available containers with a ScrollingViewport bead.

Answer 2

As Carlos said the right way I my example is to use ScrollingViewport, Here is full working code :

<j:initialView>
        <j:ResponsiveView>
            <j:ApplicationMainContent width="100%" selectedContent="ssc1">
                <j:ScrollableSectionContent name="ssc1" width="100%" >
                    <j:Card height="600" width="200">
                        <j:Label text="A"/>
                        <j:Label text="B"/>

                        <j:VGroup height="50" width="100%" gap="1">
                            <j:beads>
                                <j:ScrollingViewport/>
                            </j:beads>
                            <j:Label text="0"/>
                            <j:Label text="1"/>
                            <j:Label text="2"/>
                            <j:Label text="3"/>
                            <j:Label text="4"/>
                            <j:Label text="5"/>
                        </j:VGroup>

                        <j:Label text="C"/>
                    </j:Card>
                </j:ScrollableSectionContent>
            </j:ApplicationMainContent>
        </j:ResponsiveView>
    </j:initialView>

giving this :