Ion-footer, sticky for the ion content and the bottom of the screen
I want to create a footer whose height will depend on the height of the content, for example
Also, the footer cannot be less than 2 images (minimum height).
The content is dynamically generated (ionic list * ngFor). This is my current pseudocode
<ion-header>
<ion-navbar>
<ion-title>
Title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<button ion-item *ngFor="let item of items">
{{ item.name}}
</button>
</ion-list>
</ion-content>
<ion-footer class="footer">
</ion-footer>
CSS
.footer{
background-color: blue;
min-height: 10em;
height: auto;
}
But it never fills all the blank space on the screen, I am still like this:
source to share
The ionic footer approach won't work here as the needle-style CSS style has absolute positioning. This means that its height cannot be relative to the height of the ion content.
The required layout can be achieved with a different approach using flex.
<ion-content >
<div style=" display: flex;flex-direction: column;height: 100%;">
<ion-list padding-horizontal padding-top style="overflow-y: scroll;max-height: 90%;">
<button ion-item *ngFor="let item of items">
{{ item.name}}
</button>
</ion-list>
<div style="flex: 1;background-color: blue;">Footer</div>
</div>
</ion-content>
Extract the icon element from HTML. This should give a similar layout.
source to share
I would like to suggest a different "more ionic" approach, using my own components instead of divs and a few style rules.
Jay's solution solves the problem with CSS by placing a sticky footer at the bottom of the content. However, I moved the component out of it, so it always stays at the bottom of the page:
<ion-content>
// Page content
</ion-content>
<ion-footer>
// Footer content
</ion-footer>
To see an online example, I created a StackBlitz here . Hopefully this may be helpful for you (albeit a little late) and for future readers.
source to share