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

**URL:** <https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123>\
**Category:** ionic-v3\
**Created:** [May 5, 2017, 7:25pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123 "2017-05-05T19:25:12Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidgeller](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/davidgeller/32/105167_2.png) [@davidgeller](https://forum.ionicframework.com/u/davidgeller)\
**Post date:** [May 5, 2017, 7:25pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/1 "2017-05-05T19:25:12Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/e/c/eccaa875b8e7a1655e9fd0998d98b34ae73d6dfe.png)

Any suggestions would be appreciated.

```auto
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 

```

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [May 5, 2017, 8:53pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/2 "2017-05-05T20:53:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rtalexk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rtalexk/32/108700_2.png) [@rtalexk](https://forum.ionicframework.com/u/rtalexk)\
**Post date:** [May 5, 2017, 9:36pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/3 "2017-05-05T21:36:10Z")

</div>

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

```auto
<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>

```

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

```

---

<div class="post-metadata">

**Author:** ![davidgeller](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/davidgeller/32/105167_2.png) [@davidgeller](https://forum.ionicframework.com/u/davidgeller)\
**Post date:** [May 5, 2017, 10:02pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/4 "2017-05-05T22:02:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![davidgeller](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/davidgeller/32/105167_2.png) [@davidgeller](https://forum.ionicframework.com/u/davidgeller)\
**Post date:** [May 5, 2017, 10:10pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/5 "2017-05-05T22:10:47Z")

</div>

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

```auto
<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:

```auto
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](https://global.discourse-cdn.com/ionicframework/original/3X/1/c/1ce7e99cc4d696e9bd45368424a71253143aad78.png)

---

<div class="post-metadata">

**Author:** ![davidgeller](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/davidgeller/32/105167_2.png) [@davidgeller](https://forum.ionicframework.com/u/davidgeller)\
**Post date:** [May 5, 2017, 10:24pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/6 "2017-05-05T22:24:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 5, 2017, 10:27pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/7 "2017-05-05T22:27:11Z")

</div>

> [@davidgeller](#):
>
> the list no longer scrolls.

[@brandyshea to the rescue](https://forum.ionicframework.com/t/ion-list-inside-card/25130).

---

<div class="post-metadata">

**Author:** ![rtalexk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rtalexk/32/108700_2.png) [@rtalexk](https://forum.ionicframework.com/u/rtalexk)\
**Post date:** [May 5, 2017, 10:30pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/8 "2017-05-05T22:30:02Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![davidgeller](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/davidgeller/32/105167_2.png) [@davidgeller](https://forum.ionicframework.com/u/davidgeller)\
**Post date:** [May 5, 2017, 10:47pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/9 "2017-05-05T22:47:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Manel00](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@Manel00](https://forum.ionicframework.com/u/Manel00)\
**Post date:** [July 10, 2019, 8:27am UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/10 "2019-07-10T08:27:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HoanDao](https://avatars.discourse-cdn.com/v4/letter/h/ccd318/32.png) [@HoanDao](https://forum.ionicframework.com/u/HoanDao)\
**Post date:** [December 15, 2020, 10:15am UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/11 "2020-12-15T10:15:26Z")

</div>

thank you! 😍

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:52pm UTC](https://forum.ionicframework.com/t/how-can-i-constrain-the-height-of-an-ion-list-resolved/89123/12 "2021-07-19T20:52:24Z")

</div>

Closed on July 19, 2021, 8:52pm UTC