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