Div position changed after pop from another page and close keyboard

Problem scenario:

  1. Lets say you have Div with 45px margin-top in page 1 content.
  2. Push button and nav.push to page 2
  3. enter text on textarea
  4. touch anywhere in the screen to force the keyboard to close
  5. hit soft back button.

The problem: the Div now is presented at much less then 45px margin from top and you cannot scroll up. Happening on Android device and not happening on android emulator.



  margin-top: 45px;
  margin-left: 35%;
  font-size: 20;

  width: 100px;
  height: 40px;
  margin-left: 30%



<ion-content padding>
     <div class="testMargin"><span>TITLE</span></div>
     <button class="myButton" (click)="gotoPage2()">Go to page 2</button>  


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Page2Page} from '../page2/page2';

  selector: 'page-page1',
  templateUrl: 'page1.html',
export class Page1Page {

  constructor(public navCtrl: NavController, public navParams: NavParams) {



    width: 50%;
    margin-left: 25%;
    border: 2px solid black;
    font-size: 20px;
        <ion-content >
          <ion-input class="edit" maxlength="20"></ion-input>


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

  selector: 'page-page2',
  templateUrl: 'page2.html',
export class Page2Page {

  constructor(public navCtrl: NavController, public navParams: NavParams) {

ionic info

cli packages: (C:\Users\sodedkor\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.16.0
ionic (Ionic CLI) : 3.16.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
@ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.7.1
Node : v6.9.1
npm : 5.5.1
OS : Windows 8.1
Environment Variables:
ANDROID_HOME : not set
backend : pro



I experienced this issue in a similiar way.

I discoverd, that it’s the <div class="scroll-content> inside <ion-content></ion-content> and ist margin-top property gets deleted.

As soon as you reload the page, anything is back to normal.
A weak Workaround is the set a margin-top, but the correct value differs and as your Navigation stack changes, there are many different <div class="scroll-content>.

Thanks for replying
I am not sure I understand.

  1. I do not have “scroll-content” class.
  2. I have margin-top already in “.testMargin” class above.
    I am probably missing something. appreciate your help


in Building Phase, These 2 divs get created. the 2nd div with class="scroll-content" has a margin-top.
This property gets deleted, go inspect it.

WOW, that’s exactly what I am facing. Is it ionic bug? how do you suggest me to fix it in case I have only those 2 pages? where should I set the margin-top exactly? I tried few options and non of the worked for me.

Is there an official solution for this problem?

I didn’t find an official solution and I don’t know if we are doing sth wrong to produce this issue.
My weak Workaround is to set in this page’s scss a simple

margin-top: 64px;

actually, u should read out the page’s margin-top when it’s loaded the first time, because the value depence on the device’s Screen. But I didn’t find any Motivation to do this, but so far this is doing quite ok.

@rapropos can you maybe say sth about this?

Thanks. How do I read margin-top? and how do I change it dynamically?

var style = window.getComputedStyle(document.getElementsByClassName("scroll-content")[0], null);
// sometimes there are different divs of this class, so you have to adjust the index maybe
var value = style.getPropertyValue("margin-top"); // Returns "64px" or sth similar
1 Like

Will try it soon. And is there a way to set It dynamically? I will look for it also on the web

YES!!! This solved my problem. Thank you very much for taking the time to help others!!!

I added the following in the variables.scss:

.scroll-content {
    margin-top: 57px !important;

ion-page > ion-content > fixed-content {
    margin-top: 57px !important;

Thanks a lot.

@felix9607 @samikoren1

I have the same problem - the margin-top disappears, when popping navigation stack. I am using lazy-loaded pages. This problem only occurs on Android devices.

I think this is a major problem. Could you report this bug directly to Ionic GitHub repository?

@felix9607 @samikoren1 @serpaulius

I have been facing this issue recently too.

Can you please update this forum post with the link to the GitHub Issue once it is created?

I am sorry but I am not using github and thus don’t know how to add it. the solution is as I described above. I guess I will have to use it though soon.
BTW: It is not a solution but it is a working workaround suggested by felix above.