NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.22k stars 241 forks source link

[Nativescript 7] Scroll issues when keyboard show up #2336

Open salvatorebnt opened 3 years ago

salvatorebnt commented 3 years ago

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!!