I have a textarea on a page with some divs above it. When I focus on the textarea, the content above is being pushed off screen. When I blur out of the textarea, it jumps back down, but there is a noticable 1-2s delay.
The ideal would be that the content isn’t pushed off screen. On the Ionic 1 docs, I see the following:
If the content of your app (including the header) is being pushed up and out of view on input focus, try setting cordova.plugins.Keyboard.disableScroll(true). This does not disable scrolling in the Ionic scroll view, rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.
Is there an alternative or workaround for Ionic 2?
So you can use that same method in ionic 2.
import {App, Platform} from 'ionic-angular';
import {StatusBar, Keyboard} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {}
})
export class MyApp {
rootPage: any = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Here I'm using the keyboard class from ionic native.
Keyboard.disableScroll(true)
StatusBar.styleDefault();
});
}
}
2 Likes
Thanks, Mike. I’ve tried the Keyboard.disableScroll(true) but I’m still getting the same issue. I’ll try reproduce on a clean app and log it on GitHub.
1 Like
Corin
October 18, 2016, 9:35pm
4
For me the Keyboard.disableScroll(true) just work in the ionViewDidEnter…
ionViewDidEnter() {
this.platform.ready().then(() => {
Keyboard.disableScroll(true);
});
}
ionViewWillLeave() {
this.platform.ready().then(() => {
Keyboard.disableScroll(false);
});
}
And remember to add in your NgModule:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
6 Likes
crkvend
October 28, 2016, 12:30pm
5
What do scrollAssist autoFocusAssist actually do? They are not documented here:
I tried solution but i’m still gettting the same issue .
Corin:
And remember to add in your NgModule:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
This is what I was looking for. THANKS
4 Likes
Corin
November 17, 2016, 8:31pm
8
You need to use it in coordination with:
Corin:
For me the Keyboard.disableScroll(true) just work in the ionViewDidEnter…
ionViewDidEnter() {
ionViewWillLeave() {
1 Like
this is working! saving my time, thanks !
2 Likes
rashnk
April 27, 2017, 8:50am
10
this solution not working for rc4, native 3
Hi, do you have a solution for this issue yet?
remove keyboard plugin and add again
Add this app.module.ts
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
in app.component.ts
import { Keyboard } from '@ionic-native/keyboard';
constructor(
public platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private keyboard: Keyboard
)
initializeApp() {
this.keyboard.disableScroll(false);
}
6 Likes
rashnk:
rd.disableScroll(false);
This doesn’t work for me. Do you need a special text input box or anything? I am using text area.
I didn’t mean to include the quote. I tried everything in rashnk’s post. Nothing working.
Do you have the sample HTML of your page? Thanks!
rashnk
May 16, 2017, 2:29am
15
Are u upgraded to native 3 ?
Thanks for the reply!
Here is my version information:
I thought maybe the “no-bounce” in the ion-content was impacting it but it is not.
I am testing on iOS simulator and my device.
Here is the Mockup HTML of the page:
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu" color="light"></ion-icon>
</button>
<ion-title color="dark">Chat</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="app-background" no-bounce>
<div class="chat-window-container" style="padding-top:20px">
<div class="chat-window">
<div class="message-list">
<div class="msg-container base-receive" style="vertical-align:top;">
<div class="avatar" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
<div class="messages msg-receive secondary-background-color">
<p>Hi</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
</div>
<div class="msg-container base-sent" style="vertical-align:top;">
<div class="messages msg-sent primary-background-color">
<p>Hi</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
<div class="avatar-sent" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
</div>
<div class="msg-container base-receive" style="vertical-align:top;">
<div class="avatar" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
<div class="messages msg-receive secondary-background-color">
<p>It defines the default behaviour for how flex items are laid out along the cross axis on the current
line. You can think of it as the justify-content version for the cross-axis (perpendicular to
the main-axis).</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
</div>
<div class="msg-container base-sent" style="vertical-align:top;">
<div class="messages msg-sent primary-background-color">
<p>The following figure helps understand how flex items are layed out depending on the align-items value.</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
<div class="avatar-sent" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
</div>
<div class="msg-container base-receive" style="vertical-align:top;">
<div class="avatar" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
<div class="messages msg-receive secondary-background-color">
<p>Hi</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
</div>
<div class="msg-container base-sent" style="vertical-align:top;">
<div class="messages msg-sent primary-background-color">
<p>Hi</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
<div class="avatar-sent" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
</div>
<div class="msg-container base-receive" style="vertical-align:top;">
<div class="avatar" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
<div class="messages msg-receive secondary-background-color">
<p>It defines the default behaviour for how flex items are laid out along the cross axis on the current
line. You can think of it as the justify-content version for the cross-axis (perpendicular to
the main-axis).</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
</div>
<div class="msg-container base-sent" style="vertical-align:top;">
<div class="messages msg-sent primary-background-color">
<p>The following figure helps understand how flex items are layed out depending on the align-items value.</p>
<p class="time">jrmcdona • 1 minute ago</p>
</div>
<div class="avatar-sent" style="display: inline-block">
<img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
</div>
</div>
</div>
<message-input>
<div style="flex:1;padding-left:5px;">
<textarea (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></textarea>
</div>
<div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
<ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
</div>
</message-input>
</div>
</div>
</ion-content>
I have the same problem on iOS, did you find out the solution?
Thanks!
@Mystearica no not yet. Hoping @rashnk will shed some light on the issue. Or somebody whom has solved this!
This is something we are currently addressing in the wkwebview plugin.
2 Likes
Should we migrate to this wkwebview plugin? Any reason not too?
Our entire app is based off chat as the main functionality so I am trying to undersstand the roadmap and impacts.
Thanks