Modal Resize in Ionic framework 6

Issue

I am using Ionic frame work 6 and Angular 13 for my application. I want to resize the ionic modal in this. I tried to pass a global class along with the creation. It is not working. I tried to resize the wrapper class. Its working in the previous version of Ionic -5. But not here. Please help. Thanks in advance.

commonService.ts

async createPopup(options) {
    options.componentProps.service = this;
    const ref = await this.modalController.create({
      component: AppModalPopupComponent,
      ...options
    });
    if (!this.modalPopup?.length) { this.modalPopup = []; }
    this.modalPopup.push(ref);
    ref.present();

    return ref;
  }


component.ts


this.modalService.createPopup(
      {
        backdropDismiss: true,
        componentProps: {
          header: 'Update Banner in My Queue',
          component: AppUpdateImagePopoverComponent
        },
        cssClass: "image-popup-modal-css"
      });```

Global.scss

.image-popup-modal-css {
  height: 100%;
  width: 100%;
  color: var(--app-secondary-color);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-popup-modal-css .modal-wrapper {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: minmax(min-content, max-content);
  height: 100%;
  border-radius: 10px;
  margin: 20px;
  position: absolute;
  top:0
}

Solution

In ionic 5 I was using this:

.example-modal {
  align-items: center;
  justify-content: center; 
  .modal-wrapper { 
    --height: 80%; 
    --width: 50%;   
  }
}

And in Ionic 6 I changed to this

.example-modal {
  align-items: center;
  justify-content: center; 
  &::part(content){
    width: 80%;
    height: 50%; 
  }
}

Answered By - nicolas acerenza