Modal overlapping statusbar on iOS

Hey I’m using beta.9.

Pages seem to have a spacer at the top to account for the statusbar on iOS, but the modals don’t.

Does anyone else have that issue?

My markup looks like

    <!-- title, buttons, etc -->
<ion-content padding>
    <!-- content-->

And I’m just opening the modal in the standard way

    let modal = Modal.create(MyModal);

The buttons are hard to get to under the statusbar!

Cheers, Ryan

I’m having the same issue.

I looked into this and there was a change. Don’t use @Page for content that goes into modals. Use @component instead. You can see this used in the example below.

Thanks! I missed that change!. I’d added some custom sass in as a stop gap, but using @Component is the correct way to do it.

I am using @Component but still it’s overlapping, If we remove @component how to use html file?

I have link on login page forgot password, when we click I open modal and following are my code…


  templateUrl: 'build/pages/login/login.html',


  templateUrl: 'build/pages/forgot/forgot.html',

What’s your html look like?

And it is only modals that are affected, or other pages in the app too?

my forgot.html, all models has same issue, all are overlapping…

      <button (click)="dismiss()">Cancel</button>

      Forgot Password?


<ion-content class="login-page">

    <div class="logo">
      <img src="img/logo.png" height="30" />

    <form [formGroup]="myForm" novalidate (ngSubmit)="submitForm(myForm.value, myForm.valid)">
      <ion-grid no-padding>
              <ion-label floating primary>Your Email Address</ion-label>
              <ion-input formControlName="email" type="email" required>
            <p [hidden]=" || ( && !submitted)" danger padding-left>
                  Please enter valid email address.


      <ion-row responsive-sm>
          <button type="submit" primary block>Reset Password</button>
          <button (click)="dismiss()" light block>Login</button>



Get rid of the ion-modal-view tags and it should be ok.

Thanks ryanhow, it’s works gr8… thanks a lot…

I have the following HTML. But I’m still having this issue :worried:

    <ion-buttons start>
      <button (click)="clickHandle()">Left</button>

    <ion-title> Title </ion-title>
    <ion-buttons end>
      <button (click)="clickHandle2()">Right</button>

<ion-content padding> 
    <ion-textarea  type="text"></ion-textarea>

I think you want ion-toolbar instead of ion-navbar

I had ion-toolbar before. Same problem.

Hmm… not sure sorry! The HTML looks ok as far as I can see.

How are you opening the modal? and what version of ionic are you using?

Haa. Just found out why. It was printing the component selector.


Getting rid of the selector works. :grin:

1 Like

@maggie001 Haha funny I did the exact same mistake right now. Thx for posting the solution.

hi ryan, the modal is still overlapping?

@iknox27 I haven’t had this issue for months!

I’m having this issue, when navigating from a modal to a different page, on that next page!
If I go that page from a different component, everything is fine.