Hi,
I’m having an issue with the ion-content/ion-list in my application.
I have the following components:
Div1:
Div2 (which contains an array “items” with 30 numbers):
And I include the components in a page called “home” with:
<ion-content>
<app-div1 style="width:100vw;"></app-div1>
<app-div2></app-div2>
</ion-content>
The homepage is loaded in the app.component.html with the ion-router-outlet.
My functional goal is to have a page, where the user sees a tab and a list with a button:
Both div components should be fixed, while the list in div2 should be scrollable.
I’ve tried to put ‘ion-list’ in div2.component in an ‘ion-content’, but then the ion-content will use 100vh and the last items of the array are off-screen. Also, if I read the documentation correctly, the ion-content should only be used once per view. This means that I should not use it per component (or ion-list), but per page. So I should avoid this anyway?
In the current state (which is shown in the images) the entire page is scrollable. Since I want my tab to be fixed, I tried to add slot=“fixed” to on the homepage. This causes the components to overlap.
So first, I’d like to know whether I am using any ionic components in a wrong way.
Second, I’d like to know how to achieve my functional goal. From my humble, Ionic newbie, point of view, I need to fix the overlapping issue. So that I do not abuse ‘ion-content’.
So; Why is my ‘div1’ overlapping the ‘ion-content’ when I add slot=“fixed”? How do I make ‘div1’ fixed without the components overlapping?
Hope you can help me 
Kind regards,
Louwrens
1 post - 1 participant