Hello,
we have a layout which contains navbar, search area e two contents, one content is the description (content description
) and the other content itself which is a list of buttons in a ion-content
which is scrollable by default.
That is the layoput:
As you can see, my content description
is overlaping my scrollable area. That is my HTML:
<ion-navbar *navbar>
</ion-navbar>
<ion-searchbar placeholder="Search..." hideCancelButton="true"></ion-searchbar>
<div style="border: 1px solid black; z-index: 10000">
<p>Description</p>
<p>Description</p>
<p>Description</p>
</div>
<ion-content padding>
<ion-list no-lines>
<button ion-item *ngFor="let topic of topics" (click)="selectTopic(topic)">
Scrollable
</button>
</ion-list>
</ion-content>
And that is my CSS:
@import "../../theme/app.variables.scss";
@import "../../theme/gradient";
.topics-component {
display: flex;
align-items: center;
ion-content {
position: absolute;
bottom: 0;
margin-bottom: 20px;
max-height: 400px;
scroll-content {
display: flex;
justify-content: center;
ion-list {
max-height: 375px;
width: 300px;
align-self: flex-end;
button {
height: 55px;
margin-top: 10px;
ion-label {
color: color($colors, slate);
}
}
}
}
}
}
The scrollable content has always to be on the top, that is why I’m using position: absolute; bottom: 0
What am I missing?