# Dynamic modal height based on content

**URL:** <https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732>\
**Category:** ionic-v3\
**Created:** [August 3, 2017, 1:03pm UTC](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732 "2017-08-03T13:03:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pliablepixels](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/pliablepixels/32/112372_2.png) [@pliablepixels](https://forum.ionicframework.com/u/pliablepixels)\
**Post date:** [August 3, 2017, 1:03pm UTC](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732/1 "2017-08-03T13:03:20Z")

</div>

I have created a custom modal, given that AlertController can’t handle text and check-boxes in one dialog. I am trying to ensure that the modal height is dynamic and only extends to the last element with a bit of padding. If you look at the screenshot below, there is a lot of space at the bottom, because my height is static.

Any thoughts on how to go about it?

Screenshot:  
 ![50 AM](https://global.discourse-cdn.com/ionicframework/original/3X/a/4/a46dfffc2a55447e6270d39bb55ec74e24d24d1f.png)

CSS in `app.scss`

```auto
//credit: https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/37
.alertModal {
    ion-content {
        &.content {
            div.scroll-content {
                top: 10%;
                left: 10%;
                width: 80%;
                height: 50%;
                overflow:hidden;
            }
        }

        &.content-ios {
            background-color: rgba(0, 0, 0, 0.3);

            div.scroll-content {
                background-color: #f8f8f8;
                border-radius: 13px;
                padding: 16px;
            }
        }

        &.content-md {
            background-color: rgba(0, 0, 0, 0.5);
            
            div.scroll-content {
                background-color: #fafafa;
                border-radius: 2px;
                box-shadow: 0 16px 20px rgba(0, 0, 0, 0.4);
                padding: 24px;
            }
        }
    }

```

modal template:

```auto

<ion-content padding>

<form (ngSubmit)="formSubmitted()">
  <ion-list-header>Name Your Trip</ion-list-header>
  <ion-item >
    <ion-input [(ngModel)]="formData.name" name="tripname" placeholder="trip name"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Track GPS lat/long</ion-label>
    <ion-checkbox [(ngModel)]="formData.xy" name="xy"></ion-checkbox>
    
  </ion-item>

  <ion-item>
    <ion-label>Read BLE OBD</ion-label>
    <ion-checkbox [(ngModel)]="formData.obd" name="obd"></ion-checkbox>
  </ion-item>

  <ion-grid>
    <ion-row>
      <ion-col width-50>
        <button ion-button block outline (click)="formCancelled()">Cancel</button>
      </ion-col>

      <ion-col width-50>
        <button ion-button block type="submit">Ok</button>
      </ion-col>
      
    </ion-row>
  </ion-grid>

</form>

</ion-content>

```

---

<div class="post-metadata">

**Author:** ![pliablepixels](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/pliablepixels/32/112372_2.png) [@pliablepixels](https://forum.ionicframework.com/u/pliablepixels)\
**Post date:** [August 3, 2017, 2:31pm UTC](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732/2 "2017-08-03T14:31:06Z")

</div>

Okay, problem mostly solved. Some final minor tweaks pending, but looks ok overall

![IMG_1354](https://global.discourse-cdn.com/ionicframework/original/3X/a/1/a1f8c0ed9412211ba82d6f9402a03c6f875a7648.PNG)

SCSS:

```auto
// credit: https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/26
.alertModal {
  @media (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-overlay;

  display: flex;

  align-items: center;
  justify-content: center;

  contain: strict;
  .modal-wrapper {
    &,
    .ion-page,
    .ion-page .content,
    .ion-page .content .scroll-content {
      contain: content;
      position: relative;
      top: auto;
      left: auto;
      padding:1px;

    }

    z-index: $z-index-overlay-wrapper;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    min-width: $alert-min-width;
    max-height: $alert-max-height;
    opacity: 0;
    height: auto;
    max-width: $alert-md-max-width;
    border-radius: $alert-md-border-radius;
    background-color: $alert-md-background-color;
    box-shadow: $alert-md-box-shadow;
    border-radius: 25px;
    padding:5px;
    

    .ion-page .content {
      background-color: color($colors, light);
      
    }
  }
}

```

HTML template:

```auto

<ion-content no-bounce >
  <ion-list-header>Name Your Trip</ion-list-header>
  <ion-item >
    <ion-input [(ngModel)]="inputData.name" placeholder="trip name"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Track GPS lat/long</ion-label>
    <ion-checkbox [(ngModel)]="inputData.xy" ></ion-checkbox>
    
  </ion-item>

  <ion-item>
    <ion-label>Read BLE OBD</ion-label>
    <ion-checkbox [(ngModel)]="inputData.obd" ></ion-checkbox>
  </ion-item>
  <ion-grid>
    <ion-row>
      <ion-col width-50>
        <button ion-button block outline (click)="inputCancelled()">Cancel</button>
      </ion-col>

      <ion-col width-50>
        <button ion-button block (click)="inputSubmitted()">Ok</button>
      </ion-col>
      
    </ion-row>

    
  </ion-grid>

</ion-content>

```

---

<div class="post-metadata">

**Author:** ![murilohaddad](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@murilohaddad](https://forum.ionicframework.com/u/murilohaddad)\
**Post date:** [March 9, 2018, 1:28am UTC](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732/3 "2018-03-09T01:28:15Z")

</div>

Not working in Ionic 3. Got an idea?

---

<div class="post-metadata">

**Author:** ![abhibly](https://avatars.discourse-cdn.com/v4/letter/a/b77776/32.png) [@abhibly](https://forum.ionicframework.com/u/abhibly)\
**Post date:** [August 24, 2018, 1:58pm UTC](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732/4 "2018-08-24T13:58:41Z")

</div>

Hello,  
I followed your steps in Ionic v3 and it worked like a charm. But when i update the app to Ionic v4, it is not working.  
I get the following error:

```auto
Module build failed: 
    z-index: $z-index-overlay;
            ^
      Undefined variable: "$z-index-overlay".

```

Can you please tell me, how can I resize the modal height based on content?

---

<div class="post-metadata">

**Author:** ![sonicwong](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sonicwong](https://forum.ionicframework.com/u/sonicwong)\
**Post date:** [April 12, 2019, 8:50am UTC](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content/100732/5 "2019-04-12T08:50:20Z")

</div>

For ionic v4, please read the post here:

> [@Dynamic modal height based on content in Ionic v4](https://forum.ionicframework.com/t/dynamic-modal-height-based-on-content-in-ionic-v4/139595/11):
>
> Original answer don’t count the header and footer height. I fixed it with below scss. Remember to rename “ion-content” to “modal-content” when used. ion-modal.auto-height { --height: auto; .modal-wrapper{ width: 90vw; .ion-page { position: relative; contain: content; max-height: 90vh; .modal-content { overflow: auto; } } } }