Hello everyone,
I’m having a problem with the scroll of ion-content and it’s relation to ion-router-outlet in my application. I created a small example in Stackblitz with a reproduction of the problem I’m facing.
I’m trying to have a global IonHeader with an ion-content with just an ion-router-outlet inside it, so the header will be defined once in the application since it’s shared across all views and there will be only one ion-content in the app.
The problem is, when you do this and try to access the /A or /B route in the app for example, you’ll notice there is no scrollbar and you can’t scroll in any way. If you put the content of A or B components directly inside the ion-content, the scrollbar will appear and work as expected.
Alternatively, if you also put an ion-content as root node in components A or B, the scroll will appear and work as expected, but as my understanding, it’s not the expected way to use ion-content as the documentation states: There should only be one content in a single view.
Another alternative is to replace ion-router-outlet with router-outlet (Native from Angular) which will fix this and the scroll will appear in both cases, but losing the IonContent functionality (And it’s fancy animation when navigating!)
With IonRouterOutlet:
With Angular’s RouterOutlet:
Thanks in advance for your help!
Stackblitz project: