2

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

McDonal_11
  • 3,935
  • 6
  • 24
  • 55

1 Answers1

7

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.

vanngoh
  • 626
  • 5
  • 15
bhavin jalodara
  • 1,470
  • 9
  • 12