ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

ionic2 slides keyboard bug #5571

Closed jurienhamaker closed 6 years ago

jurienhamaker commented 8 years ago

Short description of the problem:

I got a couple of slides, and the last one of them has a login form. whenever I try to type in the input fields, the keyboard pops up and the slides are broken, they're auto resized to the space left, and after closing the keyboard they stay that way.

What behavior are you expecting?

I am expecting it to be pushed up (like usual phone behavior I guess?) and make it possible to use form fields in slides.

Steps to reproduce:

  1. Create a view with slides
  2. add a form to one of the slides (even one input fiels will do)
  3. Tap the input field, tada.
        <ion-slide>
            <img src="img/superbuddy_logo.png" class="slide-img"/>
            <h2 class="slide-title">Let's get started!</h2>
            <ion-item>
                <ion-label>username</ion-label>
                <ion-input></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>password</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
            <button full>Log in</button>
            <div class="divider"></div>
            <button outline>
                <ion-icon name="logo-facebook"></ion-icon>
                Log in with facebook
            </button>
            <div class="divider"></div>
            <button clear>Create new account?</button>
        </ion-slide>

Ionic Version: 1.x / 2.x 2

Browser & Operating System: iOS / Android / Chrome All of them.

Run ionic info from terminal/cmd prompt:

Cordova CLI: Not installed
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.5.0
alpotapov commented 8 years ago

Any progress on this issue?

EvanWillms commented 8 years ago

Given this description of space being suddenly claimed by the keyboard when an input field is tapped and then not released afterward, this sounds like another effect of #5432.

@HazeDevelopment, @alpotapov: You might be able to make use of the workaround I found to let the keyboard slide over the content, preventing it from getting permanently squished: https://forum.ionicframework.com/t/disable-scroll-ionic2-ios9-not-working/44847/5?u=evanwillms

@brandyscarney: I would guess that this issue shares a root cause with #5432 and is unrelated to potential work in #6007, but you should probably have someone more familiar verify.

jgw96 commented 8 years ago

related to #5744

dylanvdmerwe commented 8 years ago

An plunkr example of a form with various input components within an <ion-slides>: http://plnkr.co/edit/i0MIv8mlQ5WljUJxlBAs?p=preview

The form creates all sorts of chaos. Granted this is quite a big form, but this is just an example.

jgw96 commented 8 years ago

Hey everyone! Just wanted to let the community know that we are currently making alot of changes to slides for beta.5, along with some much better docs, so look out for fixes for slides in beta.5! (:

eusthace811 commented 8 years ago

Any news about this bug? I having exactly the same problem....:(

jgw96 commented 8 years ago

Hello all! Is this still an issue with Ionic 2 beta.10? Thanks!

jgw96 commented 8 years ago

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

haroondilshad commented 8 years ago

I'm still facing this issue

sarahtully commented 8 years ago

Still experiencing this issue as well

creativeitacademy commented 8 years ago

Is there any solutions to this issue yet? I am using Ionic 2 RC1 and having this problem. I put my login form on a slider, then on iPhone if I tap on the input box then if I move away the focus from the textbox and tap again then the form moves up. Please see the screenshot. I tried Keyboard.disableScroll(true) but didn't work. I am not sure how to use scrollAssist and autoFocusAssist with RC1 though.

img_5115

vejja commented 8 years ago

Same here with RC2. _Bug happens on iOS, not on Android, not in _browser__ Here is a full report on the bug

On Simulator


Initial screen = normal

simulator screen shot 10 nov 2016 a 23 15 43

Entering first field = content goes mostly off screen, almost all blank, second field disappeared

simulator screen shot 10 nov 2016 a 23 16 05

Entering second field = content goes again off screen, biiiiig time !!

simulator screen shot 10 nov 2016 a 23 16 22

Typing in second field = first field has been pushed up again

simulator screen shot 10 nov 2016 a 23 16 27

Leaving second field = back to normal

simulator screen shot 10 nov 2016 a 23 16 33

On Device

Initial screen = normal

img_0448

Entering first field = content goes mostly off screen, now we can see why (keyboard), second field has disappeared also

img_0449

Exiting first field = second field label re-appears

img_0450

Entering second field = not pushed as much as on simulator

img_0451

Leaving second field = back to normal !

img_0452

Re-entering second field = biiiiiig mess

img_0453

Info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.42
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.1 Build version 8B62

HTML

<ion-content class="init">
    <ion-slides pager #slider [options]="options">
        <ion-slide>
            <ion-toolbar>
                <ion-buttons end>
                    <button ion-button (click)="letSlide()">Next</button>
                </ion-buttons>
            </ion-toolbar>
            <h2 class="slide-title">Welcome</h2>
            <p>
                Click next to begin the initialization.
            </p>
        </ion-slide>
        <ion-slide>
            <h2 class="slide-title">Credentials</h2>
            <p>Please enter your serial number and email address</p>
            <form [formGroup]="credentialsForm" (ngSubmit)="submitCredentials(credentialsForm.value)">
                <ion-item>
                    <ion-label floating>Serial</ion-label>
                    <ion-input type="text" formControlName="serial"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label floating>Email</ion-label>
                    <ion-input type="email" formControlName="email" clearInput></ion-input>
                </ion-item>
                <div padding>
                    <button ion-button color="primary" block type="submit" [disabled]="!credentialsForm.valid">Validate</button>
                </div>
            </form>
        </ion-slide>
                <ion-slide>
                   Whatever
                </ion-slide>
        <ion-slide>
            <h2 class="slide-title">Ready to Play?</h2>
            <button ion-button large clear (click)="initDone()">
                Continue
                <ion-icon name="arrow-forward"></ion-icon>
            </button>
        </ion-slide>
    </ion-slides>
</ion-content>

TypeScript

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { HomePage } from '../../pages/home/home';

@Component({
    templateUrl: 'init.html',
})
export class InitPage {
    @ViewChild('slider') slider: Slides;
    nav: NavController;
    credentialsForm: FormGroup;
    slides: any;
    options: any;

    constructor(public navCtrl: NavController, public fb: FormBuilder) {
        this.nav = navCtrl;
        this.credentialsForm = this.fb.group({
            serial: ['', [Validators.required, Validators.pattern('^[A-Fa-f0-9]{16}$')]],
            email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$')]]
        });
        this.options = {
            pager: true,
            onlyExternal: true
        };
    }

    letSlide(self: any = this): void {
        self.slider.slideNext();
    }

    submitCredentials(data): void {
        this.letSlide(this));
    }

    initDone(): void {
        this.navCtrl.setRoot(HomePage);
    }
}

Safari inspector (on simulator)

When everything is normal, ion-content inserts a div with class="scroll-content"

capture d ecran 2016-11-11 a 00 15 53

When the screen goes mad, ion-content inserts padding-bottom of 434px into that div

capture d ecran 2016-11-11 a 00 16 32

vejja commented 8 years ago

@manucorporat There is a very helpful gist by @EvanWillms https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7 I am pretty sure it can help nail down the root cause of the issue.

Daskus1 commented 7 years ago

Is there any progress on this issue? I have the same problem, when typing on an input inside a slide the slide is broken

hotforfeature commented 7 years ago

I've been using <ion-slides> with form inputs for a while now. The problem is that the slider wasn't designed for use with assistive scroll.

I have a workaround described in #10258. It involves making the slider ion-fixed and using <ion-content> inside each <ion-slide>.

The one caveat is that <ion-content> also wasn't designed to deal with multiple content elements on a page. There's a patch in the linked issue that you'll want to call on your ViewController when you create your component.

sufiiiyan commented 7 years ago

I'm still facing this issue when I is use input with ion-slide. Is there any solution or any updates

ordova CLI: 6.5.0 Ionic Framework Version: 2.2 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1 ios-deploy version: Not inst ios-sim version: Not install OS: Windows 8.1 Node Version: v6.10.0 Xcode version: Not installed

pablozandona commented 7 years ago

+1

Cordova CLI: 6.5.0 Ionic Framework Version: 3.1.1 Ionic CLI Version: 2.2.3 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.4 ios-deploy version: Not installed ios-sim version: Not installed OS: Linux 4.10 Node Version: v5.12.0 Xcode version: Not installed

douglasmoraisdev commented 7 years ago

This workaround worked for me in app.modules.ts:

imports...

@NgModule({

    declarations: [
        ...
    ],

        imports: [
        IonicModule.forRoot(MyApp, {
            scrollAssist: false
        }),
        ...
    ],

Source: https://forum.ionicframework.com/t/disable-scroll-ionic2-ios9-not-working/44847/9

krunal9421 commented 6 years ago

I am facing this issue in android case. Any solution for it.

aymehri commented 6 years ago

Hello i'm facing the same issue. Any update?

fishme commented 6 years ago

I have the same issue. 2 years old bug...

polfernandez commented 6 years ago

Hi guys, I still have the issue. The keyboard moves the whole screen up when it appears. Someone has solved it? :'(

I have the same issue ONLY on iOS

Find attached 2 pictures showing the problem:

--- Normal Screen --- captura de pantalla 2018-02-21 a las 11 36 43

--- Screen goes up when keyboard appears --- captura de pantalla 2018-02-21 a las 11 36 53

My code:

<ion-header>
  <ion-navbar>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list no-lines> 
      <ng-container>
      </ng-container>
  </ion-list>
</ion-content>

<ion-footer>
 <ion-toolbar>
  <ion-item>
    <div item-content>
      <ion-textarea 
                    fz-elastic
                    (ionFocus)="_onFocus($event)"
                    (ionBlur)="_onBlur($event)"
                    (ionChange)="_onChange($event)"
                    (keypress)="_onKeypress($event)"
                    [disabled]="disabled"
                    [placeholder]="placeholder">
      </ion-textarea>
    </div>
  </ion-item>
 </ion-toolbar>
</ion-footer>

IONIC INFO

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 6.5.0 local packages:

   @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.4.0 ios 4.3.1
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.1.2 
    Node       : v8.9.1
    npm        : 2.15.12 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 
ionitron-bot[bot] commented 6 years ago

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

ionitron-bot[bot] commented 6 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/42