Ion-content within a modal should fit content height

Ionic Framework ionic-v3
1

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

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

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

.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
Greenshot 2018-04-09 15.48.37.png378×674 22.7 KB

Thank you

2

wouldn’t you change those css values?

3

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?

4

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

5

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 :slight_smile:

6

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

7

bulletin
Maybe that’s what you are looking for Check it out