Ionic-framework: bug(input): input controls in sliders are broken

[dylanvdmerwe]

Ionic version: (check one with "x")
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
I have an ion-slides component which has some ion-input and ion-textarea controls in. On RC2 the way the form scrolled when a keyboard displayed on a device was bearable. In RC3 it is completely broken. In latest nightly it's better but still very bad.

When a user touches an input, the input completely flies off the screen or is in the completely wrong position. When the keyboard is dismissed the screen is not returned to it's proper position. I have ion-footer elements in each ion-slide which show how the screen is not aligned after the keyboard is dismissed.

On iOS the footer and input are in the wrong positions, and sometimes the inputs do not even accept inputs from the keyboard.

Tested on Android 6.0.1 and iOS 10.1. No Crosswalk or WKWebView.

Expected behavior:
Scrolling to work correctly for form inputs on slides.

Similar to this issue. https://github.com/driftyco/ionic/issues/5744

See Android screenshots below. I will send a repro project to whichever team member requires it.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612080433
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

[dylanvdmerwe]

Removing the 300px padding helps in latest nightly. However on iPhone 5 things are horrible still.

    //fix for ionic scroll not playing nice with slides
    .scroll-content {
        padding-bottom: 0px!important;
    }

[jgw96]

Hey @dylanvdmerwe ! Would you mind trying this with scrollAssist: false in your config and seeing what the behavior is then please?

[jgw96]

So after some more testing I have tracked down this issue to being a css issue related to the height: 100% on ion-slides. Not entirely sure why at the moment, but for some reason that bit of css breaks the world when a slide has an input.

[jgw96]

Update: i have a solution for this but its hacky and im not happy with it at the moment. Gonna try to clean it up.

[jgw96]

Working on this here https://github.com/driftyco/ionic/tree/inputSlides . Current strategy involves looking for the closest ion-slides from the container of the input. If there is an ion-slides then we simply focus the input and thats it, no fancy input scrolling. If there is no ion-slides then things just work normally.

[Schwoebel]

Hey @jgw96 how did the cleanup go?

I noticed your inputSlides link you listed is gone now.

[nicksmithr]

Also having this issue with ionic@latest

[JoeriShoeby]

Link is dead ..

[ramzauchenna]

@dylanvdmerwe Your fix helped me so i went an extra step and added overflow: scroll on ths slide.

Next thing i want to do is listen on input focus and move to top.

[Qualinost1]

Hi,
any news or walkaround for this issue? The github link is not available anymore and I really would like to make this works.
An other weird thing happen to me, when I'm typing in one of this hidden input, the text is completely reversed:
Typed text : ISSUE
In the input : EUSSI
Can't know if it's a focus problem or so... it's hidden!

[dylanvdmerwe]

For iOS I recommend trying the WkWebView plugin. Should help quite a lot with scrolling issues. Also check out Ionic 3.0.1 which fixed a regression from 2.3.0.

[Qualinost1]

Thanks for the answer!
Sadly I'm working on android and tried to use the V3 CLI but things seems to be unchanged.
Any ideas for android ?

[kleeb]

Android and iOS still the same problem with newest wkwebview and Ionic 3.0.1

[jdm79]

still an issue with the input disappearing upon attempting to use keyboard. tested on my Android 5.1 MotoG too with same issue.

ionic info:

[hg1]

Hey @jgw96 !

Do you still work on this issue? It still exists using the recent Ionic Release 3.2.0.
Some time ago you commented at this pull request that you will want to do re-do it from scratch.

Thanks for replying soon.

[mtpultz]

This is still an issue in version 3.6.0. @jgw96 are you able to share your hack as a temporary solution?

cli packages: (D:\Projects\progressa\demo\node_modules)

@ionic/cli-plugin-cordova       : 1.6.1
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Node : v8.2.1
OS   : Windows 10
npm  : 5.3.0

[jonstonis]

I am experiencing the same thing. Latest of ionic seems to still have this problem. I ended up having to go with a different UI design since I couldn't get this to work.

[MvRemmerden]

Also not working for me.

[chukwu]

For some reason the slide adds offsets to the input elements and all its children. Even my cursor position is wrong.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!