Modal overlapping statusbar on iOS

Ionic Framework ionic-v3
1

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

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

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

    let modal = Modal.create(MyModal);
    this.nav.present(modal);

The buttons are hard to get to under the statusbar!

Cheers, Ryan

2

I’m having the same issue.

http://imgur.com/xxuh7Z5

3

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.

4

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.

5

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…

login.ts

@Component({
  templateUrl: 'build/pages/login/login.html',
  directives: [REACTIVE_FORM_DIRECTIVES]
})

forgot.ts

@Component({
  templateUrl: 'build/pages/forgot/forgot.html',
  directives: [REACTIVE_FORM_DIRECTIVES]
})
6

What’s your html look like?

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

7

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

<ion-modal-view>
<ion-header>
  <ion-toolbar>
    <ion-buttons>
      <button (click)="dismiss()">Cancel</button>
    </ion-buttons>

    <ion-title>
      Forgot Password?
    </ion-title>

  </ion-toolbar>
</ion-header>

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

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

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

      </ion-grid>

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

    </form>
  </ion-list>

</ion-content>
</ion-modal-view>
8

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

9

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

10

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

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

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

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

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

12

I had ion-toolbar before. Same problem.

13

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?

14

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

<ion-modal>
 <ion-page>
  <my-component></my-component>
 </ion-page>
</ion-modal>

Getting rid of the selector works. :grin:

15

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

16

hi ryan, the modal is still overlapping?

17

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

18

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.