Skip to content

bug: Keyboard pushes content up and making a scrollable view. (2.0.0-alpha.54) #5302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Abdiliban opened this issue Feb 2, 2016 · 4 comments

Comments

@Abdiliban
Copy link

When I press the input and the keyboard pops up, it pushes my content up and create a scrollable view.

here is the code:

<ion-content class="auth-view">
  <div id="loginForm">
    <img src="http://orig14.deviantart.net/1509/f/2012/053/2/0/iseeyou_gaming_logo_by_masfx-d4qly3z.png"/>
    <ion-list>
      <ion-item>
        <ion-label fixed><ion-icon name="person"></ion-icon></ion-label>
        <ion-input type="text" placeholder="Användarnamn" [{ngModel}]="username"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed><ion-icon name="lock"></ion-icon></ion-label>
        <ion-input type="password" placeholder="Lösenord" [{ngModel}]="password"></ion-input>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

Notice that after i pressed the input, it got focused and pushed my content up so now i have a larger height on the app.

stage1

stage2

@Abdiliban
Copy link
Author

Without the image it works great but i need an image over the input

@adamdbradley
Copy link
Contributor

This is by design, otherwise the virtual keyboard pushes everything out of the way. We've still got room for improvement, but doing this is the less or evils when it comes to handling how the keyboard adjusts your app.

@codespore
Copy link

@Abdiliban the only way Im fixing this right now is by setting my content to "position: absolute". That way the keyboard wouldn't adjust the content. Having said that @adamdbradley, shouldn't the normal behaviour is for the content to adjust back to it's original position after the virtual keyboard closes?

@EvanWillms
Copy link

@AdrianTeh it's worth also noting that another potential workaround to this behavior is to turn off the scrollAssist feature that adds the padding in the first place by passing scrollAssist: false into a Component's Config object.

As Adam mentioned above, this changes the overlay-avoidance behavior when the virtual keyboard appear by telling Ionic not get out of it's way. The underlying native browser also has a separate pushing behavior that may be invoked. I've jotted down a few more details at:
https://forum.ionicframework.com/t/disable-scroll-ionic2-ios9-not-working/44847/5?u=evanwillms

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants