Div position changed after pop from another page and close keyboard

Ionic Framework ionic-v3
1

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.

Page1.html:

<style>

.testMargin
{
  margin-top: 45px;
  margin-left: 35%;
  font-size: 20;
}

.myButton
{
  width: 100px;
  height: 40px;
  margin-left: 30%
}

</style>

<ion-header>
  <ion-navbar>
    <ion-title>Page1</ion-title>
  </ion-navbar>
</ion-header>


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

Page1.ts

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

@IonicPage()
@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html',
})
export class Page1Page {

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

    gotoPage2()
    {
        this.navCtrl.push(Page2Page);
    }
}

page2.html

  <style>
  .edit
  {
    width: 50%;
    margin-left: 25%;
    border: 2px solid black;
    font-size: 20px;
  }
        </style>
        
        <ion-header>
          <ion-navbar>
            <ion-title>Page2</ion-title>
          </ion-navbar>
        </ion-header>
        
        
        <ion-content >
          <br><br>
          <ion-input class="edit" maxlength="20"></ion-input>
        </ion-content>

Page2.ts

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

@IonicPage()
@Component({
  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
System:
Node : v6.9.1
npm : 5.5.1
OS : Windows 8.1
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro

Before

After

2

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

3

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
4

margintop

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.

5

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.

6

Is there an official solution for this problem?

7

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

.scroll-content{
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?

8

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

9 
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
10

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

11

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.

12

@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?

13

@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?

14

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.