Ionic 2 how to make ion-list grow from bottom upwards?

Question

Here is the gist of my code:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of array">{{item.name}}</ion-item>
  </ion-list>
</ion-content>
<ion-footer>
  <ion-searchbar (ionInput)="search()"></ion-searchbar>
</ion-footer>

The idea is to have a searchbar at the bottom of the screen, with a list above it that changes depending on the searchbar input. However, this code will make the list populate top-down with a lot of empty space between it and the searchbar if there are few items. I'd like the list to hug the searchbar (basically aligned to ion-content's bottom), while still remaining scrollable inside ion-content. What are some ways to do this?

Is the data coming from json response? – Sam5487 Dec 23 '16 at 02:40 — Sam5487, Dec 23 '16 at 02:40

score 6 · Accepted Answer · edited May 23 '17 at 12:02

Working Plunker

To push the ion-list element to the bottom you need to:

Set view encapsulation to none
Style the ion-list's container to display: flex and flex-direction: column
Style the ion-list element using margin-top: auto

No change to your html template should be necessary, and here is a good answer explaining how to push content to the bottom of a container.

Component Decorator

@Component({
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
  styles: [`
    .scroll-content {
      display: flex;
      flex-direction: column;
    }
    .scroll-content ion-list {
      margin-top: auto;
      margin-bottom: 0;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

sebaferreras · Answer 2 · 2017-07-12T19:25:11.253

@adriancarriger's answer is great, but a small improvement can be made. Since you're pushing the new elements to the bottom of the list, I guess that it would be nice to always scroll the content to the bottom, to make the new items always visible. That could be easily achieved by adding just a few lines of code:

// First add ViewChild and Content imports
import { ViewChild, Component, ViewEncapsulation } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
  styles: [`
    .scroll-content {
      display: flex;
      flex-direction: column;
    }
    .scroll-content ion-list {
      margin-top: auto;
      margin-bottom: 0;
    }
  `],
  encapsulation: ViewEncapsulation.None
})
export class HomePage {
  @ViewChild(Content) content: Content; // <-- get a reference of the content

  count = 4; // for demo
  appName = 'Ionic App';
  array = [
    { name: 'item-1' },
    { name: 'item-2' },
    { name: 'item-3' }
  ];

  constructor(private navController: NavController) {

  }
  search() {
    console.log('searching...');
  }
  add(number) {
    let itemNumber = this.count;
    this.array.push({ name: 'item-' + itemNumber });
    this.scrollToBottom(); // <- when the new item is pushed, scroll to the bottom to show it
    this.count += number;
  }

  scrollToBottom(){
    // use the content's dimension to obtain the current height of the scroll
    let dimension = this.content.getContentDimensions();

    // scroll to it (you can also set the duration in ms by passing a third parameter to the scrollTo(x,y,duration) method.
    this.content.scrollTo(0, dimension.scrollHeight);
  }
}

Great, thanks! How could I modify this further to scroll to a specific item in the list based on the searchbar input? — Ray Zhang, Dec 24 '16 at 04:16
Do you need to scroll to the item when typing (like an autoomplete) or by clicking a search button? — sebaferreras, Dec 24 '16 at 08:50
The list auto-filters based on the searchbar input as the user types. The user can click on a list item to save a copy of it to a basket. The searchbar is then automatically cleared and the list re-populated with all possible items. However, at this point I'd like for the list to also automatically scroll down to the item that was just clicked so the user is not suddenly disoriented by the list re-populating with all possible items. The just-clicked item should be positioned just above the searchbar (I've only been able to get it to scroll so the just-clicked item is at the top of the screen). — Ray Zhang, Dec 24 '16 at 18:36

Ionic 2 how to make ion-list grow from bottom upwards?

2 Answers2

Working Plunker

Component Decorator