@mvrm wrote:
I have an ionic 3 app. On a page I have a form with some fields.
<form> <ion-item> <ion-label>First item</ion-label> <ion-input type="text" [(ngModel)]="title" name="title"></ion-input> </ion-item> ... some more simple fields ... <ion-item> <ion-label>Item below keyboard region</ion-label> <ion-textarea [(ngModel)]="description" name="description"></ion-textarea> </ion-item> <button ion-button type="submit" block>Add Todo</button> </form>When I tab the first, the keyboard is shown and the input item is properly focussed, that is: shows a blinking caret.
Though, when I click a field at a position below the area needed to show the keyboard, I do not get a caret, although the field is actually focussed. When I type, the karakters are put in the field.
The main difference is that when clicking on the lower field, the form is shifted upwards when the keyboard shows.
How to fix this?
I am running the app on an iPad 2017, iOS 11.2.2.
package.json:
{ "name": "my app", "version": "1.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build --release", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/animations": "5.0.0", "@angular/common": "5.0.0", "@angular/compiler": "5.0.0", "@angular/compiler-cli": "5.0.0", "@angular/core": "5.0.0", "@angular/forms": "5.0.0", "@angular/http": "5.0.0", "@angular/platform-browser": "5.0.0", "@angular/platform-browser-dynamic": "5.0.0", "@ionic-native/app-version": "^4.5.2", "@ionic-native/calendar": "^4.3.2", "@ionic-native/call-number": "^4.4.2", "@ionic-native/camera": "^4.3.2", "@ionic-native/core": "4.3.0", "@ionic-native/date-picker": "^4.4.2", "@ionic-native/file": "^4.4.2", "@ionic-native/in-app-browser": "^4.3.3", "@ionic-native/keyboard": "^4.4.2", "@ionic-native/media-capture": "^4.4.0", "@ionic-native/native-page-transitions": "^4.3.2", "@ionic-native/splash-screen": "4.3.0", "@ionic-native/status-bar": "4.3.0", "@ionic/pro": "^1.0.9", "@ionic/storage": "2.0.1", "@ngx-translate/core": "^9.1.0", "@ngx-translate/http-loader": "^2.0.1", "call-number": "^1.0.1", "com.telerik.plugins.nativepagetransitions": "^0.6.5", "cordova-ios": "^4.5.4", "cordova-plugin-app-version": "^0.1.9", "cordova-plugin-calendar": "^4.6.0", "cordova-plugin-camera": "^2.4.1", "cordova-plugin-compat": "^1.2.0", "cordova-plugin-datepicker": "^0.9.3", "cordova-plugin-device": "^1.1.7", "cordova-plugin-file": "^5.0.0", "cordova-plugin-file-transfer": "^1.7.0", "cordova-plugin-inappbrowser": "^1.7.2", "cordova-plugin-ionic-webview": "^1.1.16", "cordova-plugin-media-capture": "^1.4.3", "cordova-plugin-privacyscreen": "^0.4.0", "cordova-plugin-splashscreen": "^4.1.0", "cordova-plugin-statusbar": "^2.3.0", "cordova-plugin-whitelist": "^1.3.3", "cordova-windows": "^5.0.0", "intl": "^1.2.5", "ionic-angular": "3.9.2", "ionic-plugin-keyboard": "^2.2.1", "ionicons": "3.0.0", "mx.ferreyra.callnumber": "0.0.2", "ng2-datepicker": "^2.2.1", "plist": "^2.1.0", "rxjs": "5.5.2", "sw-toolbox": "3.6.0", "zone.js": "0.8.18" }, "devDependencies": { "@ionic/app-scripts": "3.1.0", "cors": "^2.8.4", "typescript": "2.4.2", "ws": "3.3.2" }, "description": "An Ionic project", "cordova": { "plugins": { "com.telerik.plugins.nativepagetransitions": {}, "cordova-plugin-camera": { "CAMERA_USAGE_DESCRIPTION": " ", "PHOTOLIBRARY_USAGE_DESCRIPTION": " " }, "cordova-plugin-calendar": { "CALENDAR_USAGE_DESCRIPTION": "This app uses your calendar to plan sessions." }, "cordova-plugin-privacyscreen": {}, "ionic-plugin-keyboard": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-inappbrowser": {}, "cordova-plugin-media-capture": { "CAMERA_USAGE_DESCRIPTION": " ", "MICROPHONE_USAGE_DESCRIPTION": " ", "PHOTOLIBRARY_USAGE_DESCRIPTION": " " }, "cordova-plugin-datepicker": {}, "mx.ferreyra.callnumber": {}, "cordova-plugin-statusbar": {}, "call-number": {}, "cordova-plugin-file": { "PHOTOLIBRARY_USAGE_DESCRIPTION": "This allows", "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "This allows", "FILE_USAGE_DESCRIPTION": "This app uses your files to upload on sessions.", "CAMERA_USAGE_DESCRIPTION": " ", "MICROPHONE_USAGE_DESCRIPTION": " " }, "cordova-plugin-app-version": {} }, "platforms": [ "windows", "ios" ] } }app.module.ts:
... imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, IonicModule.forRoot(MyApp, {scrollAssist: false, autoFocusAssist: 'delay'}) ],in app.component.ts:
this.platform.ready().then(() => { console.log('Platform is ready!'); this.keyboard.disableScroll(false); ...thanks!
Posts: 1
Participants: 1