How can I constrain the height of an <ion-list> [RESOLVED]


I have a page where I’d like to constrain the height of an . Right now it’s sitting inside of an row. I’ve tried setting the height on a class I’ve associated with it - but nothing works. The list expands to take the whole screen. Is there a way to accomplish what I’m looking for? Essentially, I’m seeking this kind of layout:

Any suggestions would be appreciated.

global packages:

    @ionic/cli-utils : 1.0.0-rc.0
    Ionic CLI        : 3.0.0-rc.0

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.0.0-rc.1
    Ionic Framework                 : ionic-angular 3.0.1


    Node       : v6.9.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : 1.9.0 
    ios-sim    : 5.0.11 


The biggest issue in your desired layout may be the presence of a scrollbar. I know that at least a year ago, the dev team intentionally hid scrollbars because they weren’t rendering well. Not sure what the status of that is now.

But to try to answer your question: have you tried putting the list inside an ion-card, and using css to set the height of the card to 50% of viewport (or whatever you want)?


Maybe max-height css property could work. Add a custom class to your ion-list then on css set that property. Something like this:

<ion-list class="my-ion-list">
  <ion-item *ngFor="let item of items">
.your-page {
  .my-ion-list {
    max-height: 400px;


Aaron - I didn’t specifically require scrollbars to appear. I placed them there just to illustrate the listbox.

I did try putting the whole thing in a card. Didn’t work. Will try again, though.


Unfortunately that didn’t work. Here’s my code:

<ion-list class="hospital_list">
  <ion-item *ngFor="let destination of destinationList" (click)="selectDestination(destination)" class="destination_list">

      <span class="display-name">{{displayName()}}</span>

      <button ion-button round (click)="call()" *ngIf="showCallButton">Call</button>
      <button ion-button round (click)="getDirections()" *ngIf="showButton">Directions</button>


The CSS:

page-transport {
    .hospital_list {
      max-height: 350px;

What happens is the list takes the whole window but the other controls assume the list was positioned and sized as requested. Here’s a screen view with dummy data and the button area drawn where it should be - but the list is oversized behind it.


Aaron - correction - placing the list inside of a card did work, in terms of size constraining, but the list no longer scrolls.


@brandyshea to the rescue.


Maybe you need ad overflow property to do it works, something like this:

page-transport {
    .hospital_list {
      max-height: 350px;
      overflow-y: scroll;


rtalexk - that was it. The overflow-y did the trick. THANK YOU. And thank you AaronSterling as well. Appreciate the community support.