I'm new to nativescript. I just went over the tutorial and was able to make the barebones of an app that has a ScrollView like so:
<ScrollView (scroll)="onScroll($event)">
<GridLayout class="m-15" rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
<Label class="h3 m-5" height="50" row="0" text="Title 1"></Label>
<Image class="h3 m-5" row="1" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" height="80" width="80"></Image>
<Label class="h3 m-5" height="50" row="2" text="Title 3"></Label>
<Label class="h3 m-5" height="50" row="3" text="Title 4"></Label>
<Label class="h3 m-5" height="50" row="4" text="Title 5"></Label>
<Label class="h3 m-5" height="50" row="5" text="Title 6"></Label>
<Label class="h3 m-5" height="50" row="6" text="Title 7"></Label>
<Label class="h3 m-5" height="50" row="7" text="Title 8"></Label>
<Label class="h3 m-5" height="50" row="8" text="Title 9"></Label>
<Label class="h3 m-5" height="50" row="9" text="Title 10"></Label>
<Label class="h3 m-5" height="50" row="10" text="Title 10"></Label>
<Label class="h3 m-5" height="50" row="11" text="Title 11"></Label>
<Label class="h3 m-5" height="50" row="12" text="Title 12"></Label>
<Label class="h3 m-5" height="50" row="13" text="Title 13"></Label>
<Label class="h3 m-5" height="50" row="14" text="Title 14"></Label>
<Label class="h3 m-5" height="50" row="15" text="Title 15"></Label>
</GridLayout>
</ScrollView>
However, I'd like to make it so that those elements are in a 2-column grid however I can't figure out how to do it without crashing the app. Can someone help me out please?
in rows in GridLayout you are missing comma between auto
and for two columns you need to add columns
parameter for example with asterisks
or numbers
or auto
<GridLayout class="m-15" columns="*,*" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto">
And in elements inside of GridLayout add col="0"
or col="1"
based on if it's first or second column
<Label class="h3 m-5" height="50" col="0" row="2" text="Title 3"></Label> //third row, first column
<Label class="h3 m-5" height="50" col="1" row="2" text="Title 4"></Label> //third row, second column
More in https://docs.nativescript.org/ui/layouts/layout-containers