# Modal overlapping statusbar on iOS

**URL:** <https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333>\
**Category:** ionic-v3\
**Created:** [June 21, 2016, 2:51am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333 "2016-06-21T02:51:31Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [June 21, 2016, 2:51am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/1 "2016-06-21T02:51:32Z")

</div>

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

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

```

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

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

```

The buttons are hard to get to under the statusbar!

Cheers, Ryan

---

<div class="post-metadata">

**Author:** ![Sunburned\_Goose](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sunburned_goose/32/101353_2.png) [@Sunburned\_Goose](https://forum.ionicframework.com/u/Sunburned_Goose)\
**Post date:** [June 26, 2016, 3:04pm UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/2 "2016-06-26T15:04:13Z")

</div>

I’m having the same issue.

[http://imgur.com/xxuh7Z5](http://imgur.com/xxuh7Z5)

---

<div class="post-metadata">

**Author:** ![Sunburned\_Goose](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sunburned_goose/32/101353_2.png) [@Sunburned\_Goose](https://forum.ionicframework.com/u/Sunburned_Goose)\
**Post date:** [June 26, 2016, 4:18pm UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/3 "2016-06-26T16:18:43Z")

</div>

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.

> **[Ionic Framework](https://ionicframework.com/docs/components/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [June 27, 2016, 12:42am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/4 "2016-06-27T00:42:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jigsaxis](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jigsaxis](https://forum.ionicframework.com/u/jigsaxis)\
**Post date:** [September 5, 2016, 7:33am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/5 "2016-09-05T07:33:09Z")

</div>

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]
})
```

---

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [September 5, 2016, 11:46am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/6 "2016-09-05T11:46:56Z")

</div>

What’s your html look like?

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

---

<div class="post-metadata">

**Author:** ![jigsaxis](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jigsaxis](https://forum.ionicframework.com/u/jigsaxis)\
**Post date:** [September 5, 2016, 12:07pm UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/7 "2016-09-05T12:07:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [September 5, 2016, 1:56pm UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/8 "2016-09-05T13:56:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jigsaxis](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jigsaxis](https://forum.ionicframework.com/u/jigsaxis)\
**Post date:** [September 6, 2016, 6:24am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/9 "2016-09-06T06:24:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maggie001](https://avatars.discourse-cdn.com/v4/letter/m/278dde/32.png) [@maggie001](https://forum.ionicframework.com/u/maggie001)\
**Post date:** [September 7, 2016, 6:26am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/10 "2016-09-07T06:26:43Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [September 7, 2016, 6:41am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/11 "2016-09-07T06:41:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maggie001](https://avatars.discourse-cdn.com/v4/letter/m/278dde/32.png) [@maggie001](https://forum.ionicframework.com/u/maggie001)\
**Post date:** [September 7, 2016, 6:42am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/12 "2016-09-07T06:42:39Z")

</div>

I had ion-toolbar before. Same problem.

---

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [September 7, 2016, 6:54am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/13 "2016-09-07T06:54:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![maggie001](https://avatars.discourse-cdn.com/v4/letter/m/278dde/32.png) [@maggie001](https://forum.ionicframework.com/u/maggie001)\
**Post date:** [September 7, 2016, 7:13am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/14 "2016-09-07T07:13:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 9, 2016, 1:48pm UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/15 "2016-09-09T13:48:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![iknox27](https://avatars.discourse-cdn.com/v4/letter/i/898d66/32.png) [@iknox27](https://forum.ionicframework.com/u/iknox27)\
**Post date:** [March 20, 2017, 1:30am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/16 "2017-03-20T01:30:58Z")

</div>

hi ryan, the modal is still overlapping?

---

<div class="post-metadata">

**Author:** ![ryanhow](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@ryanhow](https://forum.ionicframework.com/u/ryanhow)\
**Post date:** [March 20, 2017, 1:58am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/17 "2017-03-20T01:58:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![felixks](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@felixks](https://forum.ionicframework.com/u/felixks)\
**Post date:** [August 15, 2017, 7:53am UTC](https://forum.ionicframework.com/t/modal-overlapping-statusbar-on-ios/55333/18 "2017-08-15T07:53:23Z")

</div>

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.