0

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 :

enter image description here

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

Fred
  • 399
  • 3
  • 12

2 Answers2

1

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 :

enter image description here

Fred
  • 399
  • 3
  • 12
0

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.

Carlos Rovira
  • 507
  • 2
  • 11
  • Hi Carlos, thanks for your explanations, so I don't use the right componant. As I had some difficults to know how to use ScrollingViewport, I will post an example – Fred Dec 16 '20 at 17:41