CODEWITHSUNDEEP
nativescriptangular2-nativescript
Upender Devulapally
Upender Devulapally

Reputation: 81

NativeScript GridLayout Equal sized rows in entire screen

Currently I am developing {N} app using Angular 2, I want to place 4 rows with equal height in the entire screen For example,

<GridLayout rows="*,*,*,*">
                        <StackLayout row="0"  backgroundColor="blue">
                            <Label text="row 0 "></Label>
                        </StackLayout>
                        <StackLayout row="1"  backgroundColor="red">
                            <Label text="row 1 with some large content and scrollable"></Label>
                        </StackLayout>
                        <StackLayout row="2"  backgroundColor="yellow">
                            <Label text="row 2 with some large content and scrollable"></Label>
                        </StackLayout>
                        <StackLayout row="3"  backgroundColor="green">
                            <Label text="row 3 with some large content and scrollable"></Label>
                        </StackLayout>
                    </GridLayout>

I want to be row1, row2 and row3 equal height in entire screen if the content is present or not.If content of the row is large and want to put that in ScrollView. In web(html) assume if entire page height is 1000, then I will give

row0 height="100" 
row1 height="300"
row2 height="300"
row3 height="300"

Can any one help me how to achieve this in {N}

Upvotes: 1

Views: 1147

Answers (2)

Upender Devulapally
Upender Devulapally

Reputation: 81

As per 'Marek Maszay' below is the my final layout.

 <GridLayout rows="auto,3*,3*,3*">
                    <StackLayout row="0" backgroundColor="blue" style="height: 25">
                        <Label text="row 0 "></Label>
                    </StackLayout>
                    <ScrollView row="1">
                        <StackLayout backgroundColor="red">
                            <Label text="row 1 with some large content and scrollable"></Label>
                            <Label text="row 2 with some large content and scrollable"></Label>
                            <Label text="row 3 with some large content and scrollable"></Label>
                            <Label text="row 4 with some large content and scrollable"></Label>
                            <Label text="row 5 with some large content and scrollable"></Label>
                            <Label text="row 6 with some large content and scrollable"></Label>
                            <Label text="row 7 with some large content and scrollable"></Label>
                            <Label text="row 8 with some large content and scrollable"></Label>
                            <Label text="row 9 with some large content and scrollable"></Label>
                            <Label text="row 10 with some large content and scrollable"></Label>

                        </StackLayout>
                    </ScrollView>
                    <ScrollView row="2">
                        <StackLayout backgroundColor="green">

                            <Label text="row 1 with some large content and scrollable"></Label>
                            <Label text="row 2 with some large content and scrollable"></Label>
                            <Label text="row 3 with some large content and scrollable"></Label> 
                        </StackLayout>
                    </ScrollView>

                    <ScrollView row="3">
                        <StackLayout backgroundColor="yellow">
                            <Label text="row 1 with some large content and scrollable"></Label>
                            <Label text="row 2 with some large content and scrollable"></Label>
                            <Label text="row 3 with some large content and scrollable"></Label>
                            <Label text="row 4 with some large content and scrollable"></Label>
                            <Label text="row 5 with some large content and scrollable"></Label>
                            <Label text="row 6 with some large content and scrollable"></Label>
                            <Label text="row 7 with some large content and scrollable"></Label>
                            <Label text="row 8 with some large content and scrollable"></Label>
                            <Label text="row 9 with some large content and scrollable"></Label>
                            <Label text="row 10 with some large content and scrollable"></Label>
                        </StackLayout>
                    </ScrollView>
                </GridLayout>

Upvotes: 1

Marek Maszay
Marek Maszay

Reputation: 1557

Based on sample from this https://docs.nativescript.org/ui/layout-containers#sample-star-sizing

So your grid definition will be like this:

<GridLayout rows="*,3*,3*,3*">
    <!--Your content-->
<GridLayout>

It's like your grid contains 10 rows but they group based on number before * in rows definition

Upvotes: 3

Related Questions