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