CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
Mobi
Mobi

Reputation: 91

Scroll List page with fixed button at the bottom IONIC

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

Answers (1)

CodeChanger
CodeChanger

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 :

ion-header

ion-footer

And your list will scroll without the footer button.

Upvotes: 2

Related Questions