The Keyboard Pushes a Div Up & Out of The Screen

The keyboard pushes a div up & out of the screen

it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard.
I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.

.scroll-content {
    padding-bottom: 0 !important;
 }

Ionic 3 - Keyboard pushes content up, and over other content, with no reason

This is a known bug of Ionic 3 and can be fixed by adding the following CSS style:

.scroll-content {
    padding-bottom: 0 !important;
}

I have had similar issues and this piece of CSS fixed it.

When an input is focused, Ionic adds some padding to the bottom of the scroll-content class, to create room for the keyboard.

---

Update

Relative top positioning may cause the issue (as well).

How to prevent iOS keyboard from pushing the view off screen with CSS or JS

first

<script type="text/javascript">
 $(document).ready(function() {
     document.ontouchmove = function(e){
          e.preventDefault();
          }
 });

then this

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

Android OS Keyboard moves Website Contents Up?

The android browser resizes the window when the keyboard is opened, there is no solution to prevent that.

Prevent virtual keyboard from pushing content up

You can take a look at this StackOverflow post, but I'll summarize the most useful parts for you:

Start off with the input's CSS as position: fixed;. When in focus, change it to absolute. Here is an example with JS:

if (document.getElementById("fixed") == document.activeElement) {
    document.getElementById("fixed").class += "absolute"
}

Of course, that relies on CSS:

#fixed {
    ...
    position: fixed;
}
#fixed.absolute {
    position: absolute;
}

I hope this helps!

Keyboard pushes the screen up ionic 2

I've had success doing the following:

1.) Throwing content you dont want to scroll within a ion-fixed container:

<ion-content class="fondo">
    <div ion-fixed>
        <img src="assets/markerBoy.png" class="logo" />

        <ion-card center>

            <ion-card-header>
                Credenciales
            </ion-card-header>

            <ion-card-content>
                <form>
                    <ion-list>
                        <ion-item>
                            <ion-label floating> Usuario: </ion-label>
                            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating> Contraseña: </ion-label>
                            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
                        </ion-item>
                    </ion-list>
                    <div padding>
                        <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
                    </div>
                </form>
            </ion-card-content>

        </ion-card>
    </div>
</ion-content>

2.) I've also read the changing from ion-input to the standard input element fixes some keyboard issues.

---

Related Topics