Closed jurienhamaker closed 6 years ago
Any progress on this issue?
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.
related to #5744
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.
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! (:
Any news about this bug? I having exactly the same problem....:(
Hello all! Is this still an issue with Ionic 2 beta.10? Thanks!
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!
I'm still facing this issue
Still experiencing this issue as well
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.
Same here with RC2. _Bug happens on iOS, not on Android, not in _browser__ Here is a full report on the bug
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
<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>
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);
}
}
class="scroll-content"
padding-bottom
of 434px into that div@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.
Is there any progress on this issue? I have the same problem, when typing on an input inside a slide the slide is broken
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.
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
+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
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
I am facing this issue in android case. Any solution for it.
Hello i'm facing the same issue. Any update?
I have the same issue. 2 years old bug...
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 ---
--- Screen goes up when keyboard appears ---
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
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!
Issue moved to: https://github.com/ionic-team/ionic-v3/issues/42
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:
Ionic Version: 1.x / 2.x 2
Browser & Operating System: iOS / Android / Chrome All of them.
Run
ionic info
from terminal/cmd prompt: