Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
salvatorebnt opened this issue Mar 5, 2021 · 1 comment
Open

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

salvatorebnt opened this issue Mar 5, 2021 · 1 comment

Comments

@salvatorebnt
Copy link

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

@lano-vargas
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants