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

Ionic Framework ionic-v3
1

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:

image
ion-list.png360×536 37.5 KB

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

System:

    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
2

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)?

3

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">
    <h2>{{item.name}}</h2>
    <p>{{item.description}}</p>
  </ion-item>
</ion-list>

.your-page {
  .my-ion-list {
    max-height: 400px;
  }
}
4

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.

5

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">
    {{destination.display}}
  </ion-item>
</ion-list>

<ion-grid>
  <ion-row>
    <ion-col>
      <span class="display-name">{{displayName()}}</span>
      <BR>
      {{displayAddress()}}
      <BR>
      {{displayPhone()}}
    </ion-col>

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

</ion-grid>

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.

image
Screen Shot 2017-05-05 at 3.07.52 PM.png469×683 30 KB

1 Like
6

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

7

@brandyshea to the rescue.

8

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

page-transport {
 
    .hospital_list {
      max-height: 350px;
      overflow-y: scroll;
    }
}
5 Likes
9

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

3 Likes
10

I love you, you saved my life, wow easy and fast, really thank you so much

11

thank you! :heart_eyes: