# Ion-content within a modal should fit content height

**URL:** <https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374>\
**Category:** ionic-v3\
**Created:** [April 9, 2018, 1:54pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374 "2018-04-09T13:54:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/skee/32/109247_2.png) [@Skee](https://forum.ionicframework.com/u/Skee)\
**Post date:** [April 9, 2018, 1:54pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/1 "2018-04-09T13:54:12Z")

</div>

Hi there,  
I have a modal with 50% height, which works great.  
i create it with the following specs:

```auto
let modal = this.modalCtrl.create(TransactionConfirmPage, {},{cssClass: "transactionConfirm-modal"});
    modal.present();

```

```auto
<ion-content padding>
  <div style="margin-bottom:15px; text-align:center">
    <div>
      <img src="assets/imgs/pp.png" width="50%">
      <br>
      <span style="font-weight:900;font-size:120%">
          $profilename
      </span>
    </div>
    <div style="padding-top: 20px;">Es werden</div>
    <div style="width:100%;Text-align:center;font-weight:600;font-size:25px; color:grey">
        50
        <img src="assets/imgs/linkups_logo.png" height="18px">
      </div>
    <div style="padding-bottom: 20px;">transferiert</div>

    <button (click)="confirmTransaction()" ion-button full style="height:3.6rem;font-size:1.4rem;width:100%" class="full_button_confirm">Coins senden</button>
    <button (click)="cancelTransaction()" ion-button full style="height:3.6rem;font-size:1.4rem;width:100%;" class="full_button_cancel">Abbrechen</button>
  </div>
</ion-content>

```

```auto
.transactionConfirm-modal {
  background-color: rgba(0, 0, 0, 0.7);
  ion-content.content{
      top: 20%;
      left: 10%;

      width: 80%;
      height: 50%;
      border-radius: 10px;
      .scroll-content {
          border-radius: 20px;
          position: absolute;
          height: 100%;
          width: 100%;
          display: table;
      }
  }
}

```

But now i want to change it in a way, that the height of the modal fits the content height.  
Anyone has an idea, how to achive that?

This is, how it looks at the moment, when the content height is bigger than the modal height (defined as percentage):

 ![37](https://global.discourse-cdn.com/ionicframework/original/3X/a/0/a0083e129d6aa987fbc2f6bcd9ed2e91d0fa6267.png)

Thank you

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [April 9, 2018, 2:00pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/2 "2018-04-09T14:00:51Z")

</div>

> [@Skee](#):
>
> top: 20%;  
> left: 10%;
> 
> ```
> width: 80%;
> height: 50%;
> border-radius: 10px;
> 
> ```

wouldn’t you change those css values?

---

<div class="post-metadata">

**Author:** ![Skee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/skee/32/109247_2.png) [@Skee](https://forum.ionicframework.com/u/Skee)\
**Post date:** [April 9, 2018, 2:08pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/3 "2018-04-09T14:08:50Z")

</div>

Sure, i could change them manually, but i need a solution which can handle dynamic content and always fits the content in the height.

Any ideas?

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [April 9, 2018, 2:12pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/4 "2018-04-09T14:12:34Z")

</div>

i assume you would write an algorithm to adjust the values based on the surrounding content size.

---

<div class="post-metadata">

**Author:** ![Skee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/skee/32/109247_2.png) [@Skee](https://forum.ionicframework.com/u/Skee)\
**Post date:** [April 11, 2018, 11:15am UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/5 "2018-04-11T11:15:03Z")

</div>

Yeah, i did that.  
Initially i create the modal with an opacity of 0.01, so its not visible.  
The modal controller itself calculates the height of its conten, changes its height and then sets the opacity to 1.  
Worls quite fine 🙂

---

<div class="post-metadata">

**Author:** ![floressottile](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/floressottile/32/132519_2.png) [@floressottile](https://forum.ionicframework.com/u/floressottile)\
**Post date:** [June 8, 2020, 4:47pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/6 "2020-06-08T16:47:23Z")

</div>

Hi! just wondering… did you solve this? If so, could you lend me a hand on this?

---

<div class="post-metadata">

**Author:** ![Romwtb](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/romwtb/32/141985_2.png) [@Romwtb](https://forum.ionicframework.com/u/Romwtb)\
**Post date:** [June 11, 2020, 3:28pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/7 "2020-06-11T15:28:31Z")

</div>

![bulletin](https://global.discourse-cdn.com/ionicframework/original/3X/c/2/c272440479027f041c2d7897afb335be74f891fd.gif)  
Maybe that’s what you are looking for [Check it out](https://output.jsbin.com/fonavuy)

---

<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:54pm UTC](https://forum.ionicframework.com/t/ion-content-within-a-modal-should-fit-content-height/127374/8 "2021-07-19T20:54:36Z")

</div>