How to display 2 vertical scollviews on same screen


#1

Hello Community Forum,

I’m brand new to NativeScript and I have a question on using gridview with scrollview together in the xml file. Below is the hello world app code I modified, I can make the left side of the gridview scroll but not the other:

main-page.xml

<GridLayout columns="230,*">
    <scrollView>
        <WrapLayout col="0">
            <Button text="Tap 1" />
            <Button text="Tap 2" />
            <Button text="Tap 3" />
            <Button text="Tap 4" />
            <Button text="Tap 5" />
            <Button text="Tap 6" />
            <Button text="Tap 7" />
            <Button text="Tap 8" />
            <Button text="Tap 9" />
            <Button text="Tap 10" />
            <Button text="Tap 11" />
            <Button text="Tap 12" />
            <Button text="Tap 13" />
            <Button text="Tap 14" />
            <Button text="Tap 15" />
            <Button text="Tap 16" />
            <Button text="Tap 17" />
            <Button text="Tap 18" />
            <Button text="Tap 19" />
            <Button text="Tap 20" />
            <Button text="Tap 21" />
            <Button text="Tap 22" />
            <Button text="Tap 23" />
            <Button text="Tap 24" />
            <Button text="Tap 25" />
            <Button text="Tap 26" />
            <Button text="Tap 27" />
            <Button text="Tap 28" />
            <Button text="Tap 29" />
            <Button text="Tap 30" />
            <Button text="Tap" tap="tapAction" />
            <Label class="counter" id="lblCounter" />
        </WrapLayout>
    </scrollView>
    
        <StackLayout col="1">
            <Button text="A" />
            <Button text="B" />
            <Button text="C" />
            <Button text="D" />
            <Button text="E" />
            <Button text="F" />
            <Button text="G" />
            <Button text="H" />
            <Button text="I" />
            <Button text="J" />
            <Button text="K" />
            <Button text="L" />
            <Button text="M" />
            <Button text="N" />
        </StackLayout>
    
</GridLayout>

Is there a way or another way to do this?

Thank you in advance.


#2

Didn’t you forget to wrap that right column in a ScrollView as well?


#3

No, I didn’t forget. It overlays the other columns when I do that. Any
ideas?


#4

The first element in a gridview should have the col/row properties set, but the scrollview doesn’t have them… so the order of elements seems incorrect to me. Example I’m using (you should be able to use a ScrollView where I’m, using a ListView):

<GridLayout columns=*,*>
  <GridLayout col="0">
    <ListView> ... </ListView>
  </GridLayout>
  <StackLayout col="1">
    <ListView> ... </ListView>
  </StackLayout>
</GridLayout>

#5

Thank you sooooo much for the tip Eddy!!! :relieved:

Now I have 2 working vertical scollviews on same the screen. So for other newbies like me, here’s my the final code:

main-page.js - added
var scrollView = require(“ui/scroll-view”);

main-page.xml

<GridLayout columns="230,*">
    <WrapLayout col="0">
        <scrollView>
            <WrapLayout>
                <Button text="Tap 1" />
                <Button text="Tap 2" />
                <Button text="Tap 3" />
                <Button text="Tap 4" />
                <Button text="Tap 5" />
                <Button text="Tap 6" />
                <Button text="Tap 7" />
                <Button text="Tap 8" />
                <Button text="Tap 9" />
                <Button text="Tap 10" />
                <Button text="Tap 11" />
                <Button text="Tap 12" />
                <Button text="Tap 13" />
                <Button text="Tap 14" />
                <Button text="Tap 15" />
                <Button text="Tap 16" />
                <Button text="Tap 17" />
                <Button text="Tap 18" />
                <Button text="Tap 19" />
                <Button text="Tap 20" />
                <Button text="Tap 21" />
                <Button text="Tap 22" />
                <Button text="Tap 23" />
                <Button text="Tap 24" />
                <Button text="Tap 25" />
                <Button text="Tap 26" />
                <Button text="Tap 27" />
                <Button text="Tap 28" />
                <Button text="Tap 29" />
                <Button text="Tap 30" />
                <Button text="Tap" tap="tapAction" />
                <Label class="counter" id="lblCounter" />
            </WrapLayout>
        </scrollView>
    </WrapLayout>
    <StackLayout col="1">
        <scrollView>
            <StackLayout>
                <Button text="A" />
                <Button text="B" />
                <Button text="C" />
                <Button text="D" />
                <Button text="E" />
                <Button text="F" />
                <Button text="G" />
                <Button text="H" />
                <Button text="I" />
                <Button text="J" />
                <Button text="K" />
                <Button text="L" />
                <Button text="M" />
                <Button text="N" />
            </StackLayout>
        </scrollView>
    </StackLayout>
</GridLayout>