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