Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Content in menu does not respect safe area

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When placing an ion-content as a direct child of ion-menu on iOS, the content area is pushed up into the statusbar area.

Expected behavior:

The content should be pushed down by the safe-area amount.

Steps to reproduce:

Related code:

<ion-app>
  <div class="ion-page" id="main"></div>
  <ion-menu contentId="main">

    <ion-content>
      <ion-list>
        <ion-item>Item 01</ion-item>
        <ion-item>Item 02</ion-item>
        <ion-item>Item 03</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
</ion-app>

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

paolosanchicommented, Feb 8, 2021

it seems that the safe area is set only for toolbar in header and footer:

https://github.com/ionic-team/ionic-framework/blob/f81d18c6f9f1bce056afda1cac4cf6d6ace0a7ca/core/src/components/header/header.scss#L17-L19 https://github.com/ionic-team/ionic-framework/blob/f81d18c6f9f1bce056afda1cac4cf6d6ace0a7ca/core/src/components/footer/footer.scss#L17-L19

So the supposed way to do it is this one:

<ion-app>
  <ion-menu contentId="main">
    <ion-header>
        <ion-toolbar>
            {stuff}
        </ion-toolbar>
    </ion-header>
    <ion-content>
            {stuff}
    </ion-content>
    <ion-footer>
        <ion-toolbar>
            {stuff}
        </ion-toolbar>
    </ion-footer>
  </ion-menu>
</ion-app>

I know you are aware, I type this down if anyone struggle on this like I did.

Behind this, I think the guys at ionic seems to use dedicated variables instead of directly safe-area-inset-top, probably for testing propose. https://github.com/ionic-team/ionic-framework/blob/f81d18c6f9f1bce056afda1cac4cf6d6ace0a7ca/core/src/css/core.scss#L149-L156 Actually, you can redefine them in index.html like this: https://github.com/ionic-team/ionic-framework/blob/a9b22601008b36c2c2f10129d20be6e3cdc4f336/core/src/components/modal/test/basic/index.html#L13-L20

1reaction

aparajitacommented, Jul 11, 2020

Hey @mhartington, I fixed this issue with this CSS:

/*
  Push the top of the menu below the safe area
  so it doesn't overlay the status bar
*/
ion-menu {
  margin-top: env(safe-area-inset-top);
}

/*
  Pull the menu header up to account for the menu top margin
*/
ion-menu ion-header:first-child,
ion-menu ion-content:first-child {
  margin-top: calc(env(safe-area-inset-top) * -1);
}