Disable scroll ionic ios9 Not working

matthewhw1989 · February 26, 2016, 10:19am

Hi,

I am trying to create an input that is within a ion-slide in ionic 2, what i am looking for is that when you focus on the input and the keyboard opens up, prevent the content and input from scrolling up, is this possible? tried using Keyboard.disableScroll(true);. I am aware this is the desired use case, but just need to change the default for this input in this slide.

thanks, any help would be appreciated

adrianteh · March 20, 2016, 2:55am

Hi matthew,

Any luck? I’m having the same problem here.

Keyboard.disableScroll(true)

doesn’t seem to work:

Plugin Version:
“name”: “ionic-plugin-keyboard”,
“version”: “2.0.1”,

My system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002

Thiphariel · April 6, 2016, 10:07am

Up … Same issue here

matthewhw1989 · April 8, 2016, 9:26am

Hi Guys,

I did find the answer in the end, turns out that padding is applied to the scroll area of the content when the keyboard opens, i found that the only way to fix this is to apply a css class to fix padding to 0px on the content class. which i can not remember what the class is called as i no longer use the slides component in this way. But you will see a large amount of padding when inspecting the elements when opening a keyboard on phone. this will pin point what to add padding 0px to. hope this helps. if not set up a codepen for me and i can find out what i did.

evanwillms · April 10, 2016, 8:00pm

Thanks for the tip towards padding being applied to the <scroll-content> directive, @matthewhw1989. It was the last puzzle piece I needed to make sense of all this keyboard related content movement.

There are two systems potentially interested in moving content out of the way when the soft keyboard is opened: the underlying native browser and the Ionic2 library itself.

Keyboard.disableScroll(false) (available via the “ionic-plugin-keyboard” cordova plugin) successfully stops the native browser from pushing/scrolling the content pane up and allows the keyboard to slide over and cover existing content.
Under Ionic2 defaults, however, there are systems in place attempting to both compensate for the keyboard slideover by adding padding to the bottom of your content (‘scrollAssist’) and to keep the focused input element within the viewport by scrolling back to it (‘autoFocusAssist’).

(There is currently an additional issue in that the scrollAssist padding is often not removed again after the keyboard goes away, leaving a new chunk of blank space. This is being tracked as ionic issue #5432: https://github.com/driftyco/ionic/issues/5432)

Fortunately, both scrollAssist and autoFocusAssist have nicely implemented switches in config that just don’t appear to have gotten public documented yet. In ionic-angular@2.0.0-beta.2 and up, one can customize these behaviors at any component level from globally across the App down to an individual input field by passing a config key into the component decorator:

@App({
    config: {
        scrollAssist: false,
        autoFocusAssist: false
    }
})

Full context of how to disable all keyboard space compensation for a whole Ionic2 app is shown in the app.ts gist linked below. I have personally tested this and seen the keyboard slide up over existing content without any pushing or scrolling in an Ionic2 (beta.3) app deployed to both iOS 9.2 and Android 6.0.

gist.github.com

https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7

app.ts

// Minimum viable app.ts pulled from https://github.com/driftyco/ionic2-starter-blank/tree/41b4da8329636a95ab05d2579efd3a1527d2e830
// This snapshot is likely ionic-angular@2.0.0-beta.4 compatable

import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',

This file has been truncated. show original

crkvend · April 10, 2016, 8:23pm

Wow, thanks for this, it really helped me understand what was happening since I had no way of inspecting the DOM while running the code on a device with an an actual software keyboard.

I am, of course, seeing the same thing. There is padding being added to compensate for the keyboard height, and this actually works great while the keyboard is opened, but the padding is not removed then the keyboard is closed. I’m using the keyboard events for other stuff and they seem realiable, so it’s a bit strange that this is failing.

sridharan31 · October 5, 2016, 5:52am

same problem, When I focus an which is positioned lower than the height of the keyboard, the input is getting hidden by the keyboard when I type its come above to keyboard

I am expecting the input to get scrolled up above the keyboard when i focus the input. any solution i’am stuck on it

import {Component, ViewChild} from '@angular/core';
import {AlertController, Platform, ionicBootstrap, Events, Nav, MenuController,Storage, LocalStorage} from 'ionic-angular';

declare var cordova:any;
declare var window:any;
@Component({
templateUrl: ‘build/app.html’,
pipes: [TranslatePipe],

  config: {
    // These options are available in ionic-angular@2.0.0-beta.2 and up.
    scrollAssist: false,    // Valid options appear to be [true, false]
    autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
  }, // http://ionicframework.com/docs/v2/api/config/Config/
providers: [ UserData, ParamsData ,ContactData, CustInfoData, RegionData, UserService, Constants]
})

export class MyApp {
storage = new Storage(LocalStorage);
  ;
  rootPage:any;
  
  @ViewChild(Nav) nav: Nav;
  //rootPage:any = MobileNumberPage;
  pages: Array<{icon: any, title: string, component: any}>
  
  constructor(private platform:Platform, 
   private translate: TranslateService,
   menu: MenuController,
   private userData : UserData, 
   private contacts : ContactData,
   private CONSTANTS: Constants) {
     
    
    menu.enable(true);
    
    // used for an example of ngFor and navigation
    this.pages = [
      {icon: 'md-speedometer', title: 'Dashboard', component: HomePage },
      
      {icon: 'md-exit', title: 'Logout', component: LoginPage }
      
    ];
    
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      
      if (window.cordova && window.cordova.plugins.Keyboard) {
        // This requires installation of https://github.com/driftyco/ionic-plugin-keyboard
        // and can only affect native compiled Ionic2 apps (not webserved).
        cordova.plugins.Keyboard.disableScroll(true);
      }
    });

    this.translateConfig();
  }
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {scrollAssist: false, autoFocusAssist: false 
});

i tried this solution i get this error

TypeScript error: app/app.ts(34,3): Error TS2345: Argument of type '{ templateUrl: string; pipes: typeof TranslatePipe[]; config: { scrollAssist: boolean; autoFocusA...' is not assignable to parameter of type '{ selector?: string; inputs?: string[
]; outputs?: string[]; properties?: string[]; events?: strin...'.
  Object literal may only specify known properties, and 'config' does not exist in type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.

Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20

eazyweb · March 6, 2017, 1:06pm

Hi,
Same error here. keyboard ruining everything when using a slider with inputs. Did you find a workaround that actually works?
thanks

rickcarhart · June 1, 2017, 2:22pm

I was able to fix this in my app.module.ts by doing this:

imports...

@NgModule({

	declarations: [
		...
	],

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

Hopefully that helps!

geruDev · June 16, 2017, 1:08am

Hello I’m having the same issue…tried using the
IonicModule.forRoot(MyApp, {
scrollAssist: false
})
also
ios : {
scrollAssist: false,
autoFocusAssist: false
}
with no luck…since this is not working there seems to be a white space in the screen while the keboard is hiding and the navs are adjusting to the new heigth…
Any help is really apreciated…
Thanks

pritijha09 · November 30, 2017, 10:10am

Its not working on IOS … works only android. plz help me anyone how to fix this issue in IOS devices…

pritijha09 · November 30, 2017, 10:12am

Its not working on IOS devices…

exequielc · March 9, 2022, 3:42pm

Did you solve
I’m facing the same issue with ionic v4

Topic		Replies	Views
Unable to Disable Keyboard Scroll on Ionic 2@beta.3 ionic-v3	7	6058	June 13, 2016
Yet another keyboard overlapping input topic ionic-v1	1	1175	February 27, 2015
Ionic version 1.3.0 - Ionic content jumps even with cordova.plugins.Keyboard.disableScroll(true) ionic-v1	2	903	May 17, 2017
Keyboard/Content driving me nuts! ionic-v1	4	1160	November 17, 2015
Keyboard scroll - pain forever ionic-v1	0	1047	November 26, 2015

Disable scroll ionic ios9 Not working

Related topics