Reputation: 91
I would like to display ion-list in a page that has fixed submit button at the bottom of the page. If I place a submit button at the bottom, it scrolls down below the list. I want to fix the button at the bottom and list should occupy only 70% of the screen. List has to scroll within that 70% height.
Please let me know how to make bottom submit button fixed and with fixed height for ion-list.
Thanks,
Upvotes: 1
Views: 3114
Reputation: 8381
To set a fixed button at the bottom you can use <ion-footer>
which will set your content always at the footer part of the screen.
<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content
Sample code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{ item.title }}
<div class="item-note" item-end>{{ item.note }}</div>
</button>
</ion-list>
</ion-content>
<ion-footer>
<div><button ion-item>Submit</button></div>
</ion-footer>
in the above code, I placed footer outside so it will stay always at footer position after ion-content.
Ref Link :
And your list will scroll without the footer button.
Upvotes: 2