Dynamic modal height based on content

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

CSS in app.scss

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


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

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

IMG_1354

SCSS:

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


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

Not working in Ionic 3. Got an idea?

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:

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?

For ionic v4, please read the post here: