How to create layout with scrolling elements and static elements below


#1

How can I create layout with scrolling elements and static elements below?

I have simple login page with StackLayout, ScrollView and another StackLayout inside root StackLayout.

My problem is: the child StackLayout with image inside is not visible.

<StackLayout>
    <ScrollView orientation="vertical" #scrollR>
            <StackLayout>

                    <image src="~/images/scorelogo.png" id="score-logo" 
                    stretch="fill" horizontalAlignment="center"
                    class="score-logo"
                    >    </image>

                    <image src="~/images/score.png" id="score-text"
                    stretch="fill" horizontalAlignment="center"
                    class="score-image"
                    > </image>

                    <StackLayout class="inputsGroup">
                        <TextField hint="Username" 
                        keyboardType="email"
                        autocorrect="false" 
                        autocapitalizationType="none"
                        style.cursorColor="rgb(255,255,255)"
                        (focus)="openField()"
                        ></TextField>

                        <StackLayout  orientation="horizontal" width="100%">
                            <TextField 
                                width="80%"
                                hint="Password" 
                                [secure]="passShow"
                                secure="true"
                                #passR
                                (focus)="openField()"
                            ></TextField>
                            <Button [text]="passText" class="hide-show" (tap)="passToogle()"></Button>
                        </StackLayout>

                        <StackLayout
                        orientation="horizontal"
                        width="100%"
                        >
                            <TextField hint="Pin"
                            keyboardType="number" 
                            [secure]="pinShow"
                            width="80%"
                            #pinR
                            (focus)="openField()"
                            ></TextField>
                            <Button [text]="pinText" class="hide-show" (tap)="pinToogle()"></Button>
                        </StackLayout>

                        <StackLayout>
                            <CheckBox 
                                text="Remember Me" 
                                checked="true" 
                                fillColor="rgb(255,255,255)" 
                                style="color:white;font-size:18px" 
                                >
                            </CheckBox>

                            <CheckBox 
                                text="Set Up Fingerprint" 
                                checked="false" 
                                fillColor="rgb(255,255,255)" 
                                style="color:white;font-size:18px" 
                                >
                            </CheckBox>
                        </StackLayout>
                    </StackLayout>


                    <Button text="Log in" class="button-login"></Button>
                    <Button text="Need help logging in?" class="button-need-help"></Button>

                </StackLayout>

 </ScrollView>

    <StackLayout>    
        <image src="~/images/fingerprint.png" 
                id="score-fingerprint" 
                stretch="none" horizontalAlignment="center"
                >    
        </image>

        <Button text="Log In With Fingerprint" class="button-need-
help"></Button>

    </StackLayout>
</StackLayout>

I’m new in NativeScript, so any help will be appreciated.


#2

@Gurgen
This is what you should be doing

Cheers!