Disable scroll ionic ios9 Not working


#1

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


#2

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


Unable to Disable Keyboard Scroll on Ionic 2@beta.3
#3

Up … Same issue here :confused:


Android keyboard open problem
#4

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.


Unable to Disable Keyboard Scroll on Ionic 2@beta.3
#5

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.

  1. 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.

  2. 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.


Unable to Disable Keyboard Scroll on Ionic 2@beta.3
Ionic 2 <ion-content> height dynamically changes while showing keyboard on device
#6

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.


#7

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


#8

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


#9

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!


#10

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


#11

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


#12

Its not working on IOS devices…