Custom modal / alert (with HTML, form...)

Ionic Framework ionic-v3
29

Any idea on how to do i get the content right. I want the modal window to be as big as my content. Here is the screen shot of how am i currently having it.

image
image.png1122×841 31.7 KB

The modal has too many white spaces and blank lines at the bottom.

Here is the code of modal page:

<ion-content padding class="guide-modal">
    <div>
      <p>SUPER!!!!</p>
      <p>Some Gyan First!</p>
      <p>We preach sustainable weight loss - max 1 </p>
      <p>kg of weight loss a week is healthy and </p>
      <p>tha is exactly what we would help you </p>
      <p>acheive :)</p>
      <button ion-button (click)="setGyanInput()">Hmmm, that's the right way</button>
    </div>
</ion-content>

And the SCSS is as:

page-guide {
    .guide-modal .modal{
        $modal-inset-min-width:0;
        $modal-inset-min-height-small:0;
        display: flex;
        height: auto;
    }
}