Dynamic modal height based on content in Ionic v4

Ionic Framework
1

Hello,

I have few components which are displayed in modal. Few Components have smaller content and few are larger. So i want the modal height and width to resize based on the content.

I have used the following styles and it worked perfectly when the app was in version 3.

  ion-modal{
    @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);
        
      }
    }
  }

After updating the app to version 4, i get the following error:

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

Can somebody tell me a way to resize the modal size based on its content in Ionicv4?

Thank you

2

What about using a popover instead?

3

I will give it a try. But is it possible to the popover always at the center of page? because we have pwa so on desktop the modal should always display at the center of page?

4

Yes it’s possible. In the situation the only downside of the popover vs the modal is that per default the popover opening animation is less cool that the modal one

I gonna even spare you some times for your test, to center the modal:

  1. when you use this.popoverController.create leave the options event empty, doing so the popover will be presented in the center

  2. but not like the center you are expecting, to do so, add the following css

      ion-popover {
   &.popover-ios, &.popover-md {
       div.popover-content {
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
   
         width: 80%;
         overflow: initial;
       }
   }
 }
5

Can’t we achieve this requirement in Ionic v4 with modal-controller only?

Because it worked correctly in Ionic 3 so i want to know is there any alternative to make this work may be styles/directives for the modal controller

6

I didn’t find a way, maybe. I tried like a couple of minutes or one hours and I just thought “nah I gonna go for a popover”

7

Ok I will try with popover.Thank you so much.

1 Like
8

but if you find a solution for modal, that would be cool, let us know :wink:

3 Likes
9

Anyone find a solution with Modal?

10

@newtonmunene @paulstelzer did publish a solution

1 Like
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;
      }
    }
  }
}
8 Likes
12

Thank you! that worked.

I think this should work automatically when setting --height to “auto”

1 Like
13

This will not work in IOS