[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:
- The keyboard appear
- 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!!
@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