Nativescript 7 + Angular: Scroll issues when keyboard show up

Question

Environment: Angular CLI: 11.2.3 Angular: 11.0.9 Node: 14.16.0 Typescript: 4.0.5 Nativescript: 7.1.2

I am having an issue when i scroll my main page in my NS app. The page contains many text field and when i touch one of them, the page scroll on the focused text field. The problem is when i touch some of the first textfields:

The keyboard appears
The page scroll on the focused textfield
Is not possible to scroll down on the other textfields
the button is hidden by the keyboard

Some code:

home.component.html

<ActionBar title="Compile">
</ActionBar>
<GridLayout rows="120,60,*,auto" width="380">
    <StackLayout row="0" class="m-b-20">
        <Label textWrap="true"
            text="Scroll doesn't work well when keyboard appear"
            fontWeight="Bold" fontSize="25" class="m-t-15">
        </Label>
    </StackLayout>

    <GridLayout row="1" columns="*,*,*,*,*" class="m-b-5" height="50"
        width="350" class="pill-div">
        <StackLayout col="0" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="red"></StackLayout>
        <StackLayout col="1" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="green"></StackLayout>
        <StackLayout col="2" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="blue"></StackLayout>
        <StackLayout col="3" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="yellow"></StackLayout>
        <StackLayout col="4" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="black"></StackLayout>
    </GridLayout>

    <ScrollView row="2">
        <StackLayout backgroundColor="#0071c2"
            class="m-t-20 rounded-container" height="auto">
            <StackLayout class="p-20">
                <StackLayout *ngFor="let t of ids" class="p-b-10">
                    <GridLayout columns="*,100">
                        <Label col="0" color="white"
                            verticalAlignment="center" textWrap="true"
                            text="{{t}}" fontSize="15" class="m-l-15">
                        </Label>
                        <TextField col="1" hint="Enter text..."></TextField>
                    </GridLayout>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </ScrollView>

    <GridLayout row="3" rows="auto,*" orientation="vertical">
        <StackLayout row="0" height="60">
            <Button text="Prosegui" (tap)="prosegui()"
                class="btn btn-primary"></Button>
        </StackLayout>
    </GridLayout>
</GridLayout>

package.json:

{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "7.1.0",
    "@nativescript/theme": "~3.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
},
"devDependencies": {
    "@angular/cli": "11.2.3",
    "@angular/compiler-cli": "11.0.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.1.0",
    "@nativescript/types": "7.0.0",
    "@nativescript/webpack": "4.0.0",
    "@ngtools/webpack": "11.0.0",
    "@schematics/angular": "10.1.0",
    "typescript": "4.0.5"
},
"main": "main.js"

}

I have built a playground: https://play.nativescript.org/?template=play-ng&id=mijGSn

The problem is not present in the playground... So, I just downloaded the code from playground, migrated the code for NS7 and built it locally. Locally is present the issue.. Any hint on how to solve? I attach the migrated code: https://drive.google.com/file/d/1PnDz-GEYVCqjeywSaCCHvlfz2r6-Wq6j/view?usp=sharing

Thanks in advance!!

William Juan William Juan · Accepted Answer · 2021-03-11T01:38:11

Android lets you modify the activity's behavior by adding some config to the AndroidManifest.xml. Depending on your use case you could set windowSoftInputMode to either adjustResize or adjustPan.

adjustResize - activity's main window is always resized to make room for the soft keyboard on screen

adjustPan - contents of the activity's main window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing

<activity android:windowSoftInputMode="adjustResize"> </activity>

Nativescript 7 + Angular: Scroll issues when keyboard show up

1 Answers