xmlnativescriptgrid-layoutnativescript-telerik-ui

NativeScript: GridLayout alignment issue


I am very new to NativeScript. I am following its own document. I am trying for UI Alignment. I unable to achieve this. I am using Xcode IDE and running in iOS Simulator.

Groceries Logo should be in Top

Textfields should be in middle

Sign up button should be in Bottom

Attempt 1

<Page loaded="loaded">

<GridLayout height=auto horizontalAlignment="center" verticalAlignment="center" columns="*" rows="auto,auto,*"  backgroundColor="brown">
    <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
    <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="1">

        <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
        <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
        <Button text="Sign in" tap="signIn"  col="0" row="2"/>

    </GridLayout>
    <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="2"/>
</GridLayout>
</Page>

Attempt 2

<Page loaded="loaded">

<GridLayout height="auto" horizontalAlignment="center" verticalAlignment="center" columns="*" rows="auto,auto,*"  backgroundColor="brown">
    <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
    <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="1">

        <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
        <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
        <Button text="Sign in" tap="signIn"  col="0" row="2"/>

    </GridLayout>
    <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="2"/>
</GridLayout>
</Page>

Issue

In attempt 1, height=auto and in attempt 2, height="auto"

I need output as Attempt 1.

I dont know, why backgroundcolor is not displaying in height=auto

I dont know, why UI Alignment is not fixing in height="auto"

If height="auto" is right way, how to do get output as Attempt 1?

Kindly help me this.

Output

enter image description here


Solution

  • if you want first row to be top,second to be middle and last one to be at bottom then you should use rows="auto,*,auto" which will do that exactly.

    try this

    <Page loaded="loaded">
    
    <GridLayout height="100%" horizontalAlignment="center" verticalAlignment="center" columns="*" rows="auto,*,auto"  backgroundColor="brown">
        <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
        <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="1">
    
            <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
            <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
            <Button text="Sign in" tap="signIn"  col="0" row="2"/>
    
        </GridLayout>
        <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="2"/>
    </GridLayout>
    </Page>
    

    same output can also be achieve by using assigning same row number to all 3 rows and using rows="*".

    like this.

    <Page loaded="loaded">
    
    <GridLayout height="100%" horizontalAlignment="center" verticalAlignment="center" columns="*" rows="*"  backgroundColor="brown">
        <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
        <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="0">
    
            <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
            <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
            <Button text="Sign in" tap="signIn"  col="0" row="2"/>
    
        </GridLayout>
        <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="0"/>
    </GridLayout>
    </Page>
    

    by assigning same row number row="0" they will overlap to each other taking full height because of rows="*". now we will set verticalAllignment of respective row to set it's position on top,bottom or center.