NativeScript/nativescript-angular

[Nativescript 7] Scroll issues when keyboard show up

salvatorebnt opened this issue · 1 comments

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:

  1. The keyboard appear
  2. The page scroll on the focused textfield
  3. Is not possible to scroll down on the other textfields
  4. 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!!

@salvatorebnt Did you manage to find any solution? I'm currently having the same issue specially on iOS. android seem to work fine if pushes the element focused above the keyboard