IonContent Size incorrect if content contains

@KevinB1 wrote:

Hi everyone,

I looked through the whole Forum & though Stackoverflow and Github, but it seems nobody has ever given an answer to this question, so here I am, maybe someone has an idea .

When the content of ion-content is played into ng-content, the size of the scrollarea is not calculated correctly.

I tried this on the ionic conference app to demonstrate the issue:

1st, we have the common header+content, which can then be used on any component
MyWrapper

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Speakers</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

  <ng-content></ng-content>

</ion-content>

2nd we have some content

<my-wrapper>
    <!-- here can be any content that should be on the page-->
</my-wrapper>

Result:
-When the content of mywrapper is played directly in the ion-content, everything works like expected
-When ng-content is used, the ion-content with is incorrect (1 full page height too big on chrome, a few pixels too small on firefox, totally missing (height 0) on IE),
-When resizing the browser, ion-content also does not resize!

Images: 1) Without ng-content 2) with ng-content

without-ngcontent1199×982 72.2 KB

with-ngcontent1232×981 67 KB

This can be easily reproduced in the ion-conference app on every page.

So how can I achieve to have 1 common ion-header + ion-content, on many pages of my application, where only the pagecontent + the footer can be different (which means ion-content cannot be its parent, as ion-footer must not be placed in content)

I have read something about refreshing the ion-content size in ngAfterViewInit(), but this was early 2018 and with ionic 4 & 5 it seems like this is no longer an option?

As always, I appreciate any hint in the right direction!

Posts: 1

Participants: 1

Read full topic