the header height of a page that pushed by a modal page will be changed smaller

[joeradar]

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

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

my iOS app pop a modal page, the app header is normal, it has a few of space for iOS system status bar. but, I push an other page with navCtrl in the modal page, the header will be smaller than previous page,

Expected behavior:

the header height of the new page be pushed will be same with the previous page
Steps to reproduce:

Related code:

insert any relevant code here

Other information:

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

insert the output from ionic info here

[brandyscarney]

Can you provide an example repository or plunker that reproduces this? Thanks! :)

[ghenry22]

@brandyscarney same issue as #8151 which was closed even though the issue is still present. See my comment at the end of that issue with the required CSS change to fix this.

This only occurs on iOS so needs to be tested in emulator or device. Android does not have this issue.

Anyone who needs a work around in the mean time just add the CSS from my comment in the older issue.

[kamok]

@ghenry22 was referencing #8151 (comment)

[joeradar]

tab3.component is a page in tabs component, the tabs page is the main page of my app

tab3.component.ts

@Component({
  selector: 'page-tab3',
  templateUrl: 'tab3.html'
})
export class MainPage{
  onClickLogin(){
    let modal: any = this.modalCtrl.create(LoginPage);
    modal.present();
  }
}

login.component.ts

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage{
  onClickRegister(){
    this.navCtrl.push(RegisterPage);
  }
}

login.html

<ion-header>
  <ion-navbar>
    <ion-buttons end>
      <button ion-button icon-only (click)="closeModal($event)">
        <ion-icon ios="ios-close" md="ios-close"></ion-icon>
      </button>
    </ion-buttons>

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

......

register.compnent.ts

@Component({
  selector: 'page-register',
  templateUrl: 'register.html'
})
export class RegisterPage{
}

register.html

<ion-header>
  <ion-navbar>
    <ion-buttons end>
      <button ion-button icon-only (click)="closeModal($event)">
        Cancel
      </button>
    </ion-buttons>
    <ion-title>Register</ion-title>
  </ion-navbar>
</ion-header>

......

[joeradar]

@brandyscarney

i post the code，thanks for you response

[joeradar]

@brandyscarney

it works good in borowser，but, the height of RegisterPage's header would be smaller in iOS.

[kamok]

@brandyscarney, the issue is not only pertaining to modal. I'm using a Tab page as the "home page", after my root page of Login. When you push a new page onto the Tab page, I still get the padding on Ionic View and iOS simulator. I added my own fix here.

[afgallo]

@brandyscarney I just wanted to confirm the issue still exists as of today. @jgw96 's comments on issue #8151 is misleading as this hasn't been fixed in RC0. I took the same approach as @kamok and added the below to fix it:

.platform-ios .ios-header-bug-fix {
    height: 64px;
    min-height: 64px;
    padding-top: 20px;
    ion-title {
        padding-top: 16px
    }
}

This is my ionic info output:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.6.0
Xcode version: Xcode 8.2 Build version 8C38

I also wanted to take this opportunity to thank the Ionic team and the wider community. The work you guys do is impressive and Ionic keeps getting better everyday 👏 👏

[kensodemann]

Hello! As it seems it has been a while since there was any activity on this issue I am closing it for now. Feel free to comment if you are still running into this issue.

If you are still having the issue, please be sure to include a GitHub repo with a sample application.

At this point, it may be best to wait until after the next major release of Ionic and Ionic for Angular and post a new issue if it is still an issue in that version.

Thanks for using Ionic!

[ghenry22]

@kensodemann - this issue still exists in the latest iconic version, it was reported a year ago, the lack of activity isn’t from the reporters side :)

Please reopen as this is still valid.

[kensodemann]

@ghenry22 - thanks for the info

[ghenry22]

IPhone X also needs testing, the css fix I posted previously resolved the problem on all other models but iPhone X behaves differently for some reason so may need some specific additions to handle it.

[smxdevst]

Issue still happening...

[junxion-io]

Try using statusBar.overlaysWebView(false);

From the docs. https://ionicframework.com/docs/native/status-bar/

[ghenry22]

@smxdevst Add this to your app.scss. I just spent a day chasing this again and trying to get it to behave. This just forces the padding / spacing to be applied the same whether the page is opened from a modal or another regular page.

You may need to add a sub item for the ion-title as well if the alignment goes out. I don't use a title on those pages so I have omitted it.

@junxion-io That is not relevant to this issue. The layout is still wrong whether the status bar overlaps or not.

// handle top padding disappearing in modals
@media only screen and (max-width: 767px){
    .ios > .ion-page > ion-header > .toolbar.statusbar-padding:first-child {
        padding-top: calc(20px + 4px);
        padding-top: calc(constant(safe-area-inset-top) + 4px);
        padding-top: calc(env(safe-area-inset-top) + 4px);
        min-height: calc(44px + 20px);
        min-height: calc(44px + constant(safe-area-inset-top));
        min-height: calc(44px + env(safe-area-inset-top));
        }
}

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#164