IonContent Size incorrect if content contains

As always, no help from the official forum

For anyone facing the same issue, I found a solution after looking into it today:

The problem is that ionic does not work as soon as the page structure is not like this:

<ion-app>
  <ion-header>
     ...
  </ion-header>
  <ion-content>
      ...
  </ion-content>
</ion-app>

Now when using a router outlet, the result is this

<ion-app>
     <ion-router-outlet>
         <example-page class="ion-page">
            <ion-header>
                ...
            </ion-header>
            <ion-content class="ion-padding">
                ...
            </ion-content>
       <example-page>
    </ion-router-outlet>
</ion-app>

Using a common component to have the same header/content behaviour on all pages results in another wrapper element after and , which is the root cause of ionic stuff like correct resizing stopping to work.

The solution:

For any custom component that wraps BEFORE or , add class="ion-page"

<ion-app>
     <ion-router-outlet>
         <example-page class="ion-page">
                <my-custom-header  **class="ion-page"**>
                   <!-- header + content are part of the custom header-->
                  <ion-header>
                      ...
                  </ion-header>
                  <ion-content class="ion-padding">
                     <!-- here comes anything inserted from the actual parent "example-page", replacing the ng-content -->
                      ...
                  </ion-content>
            </my-custom-header>
       <example-page>
    </ion-router-outlet>
</ion-app>

I hope this helps the next one who is doing a little bit more sophisticated applications in ionic

If this helped you leave a thanks in the comments, this brightens my day