Skip to content

bug: input focus scroll does not work when viewport resizing is disabled #18532

Closed
@Spinnenzunge

Description

@Spinnenzunge

Bug Report

If KeyboardResize is set to false the keyboard overlaps the webview and does not resize it. The Content scrolling on input focus does not work in this case.
As it is at the moment, I prefer the keyboard overlapping the webview and not resizing it because resizing feels clunky with jumped animations, tab-bar hiding bugs, etc.

Ionic version:

[x] 4.5.0

Current behavior:
Content scrolling not available with KeyboardResize=false because webview is full-size

Expected behavior:
If KeyboardResize is set to false, ion-content adds a keyboard-offset as padding-bottom so the content is bigger and content scrolling works.

Steps to reproduce:
Add <preference name="KeyboardResize" value="false" /> to config.xml, create a page with a long form that uses more than half of the screen

Related code:
Config.xml

<preference name="KeyboardResize" value="false" />

Page.html

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="stacked">
        <h3>Strasse, Nr.</h3>
      </ion-label>
      <ion-input type="text" name="street" inputmode="text" autocomplete="street-address" [(ngModel)]="address.street"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">
        <h3>PLZ</h3>
      </ion-label>
      <ion-input type="number" name="postalCode" pattern="[0-9]*" autocomplete="postal-code"
                 [(ngModel)]="address.postalCode"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">
        <h3>Ort</h3>
      </ion-label>
      <ion-input type="text" name="location" inputmode="text" autocomplete="locality" [(ngModel)]="address.location"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">
        <h3>Land</h3>
      </ion-label>
      <ion-input type="text" name="country" inputmode="text" autocomplete="country" [(ngModel)]="address.country"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

Other information:

Image from iOS

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0, ios 5.0.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.1, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/pascalgraf/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.14.1 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions