How to resize modal in same page in ionic?

Question

For the continuation of my feedback form app, I have another question on how to resize a modal, I know there are suggested answer here in stack overflow but it seems I can't apply on my issue.

The scenario is, Feedback Form (Modal1) will display once the user access the feedback form, then once the user submitted their feedback Thank you (Modal2) will display. But my problem is Modal1 has different size compare to Modal2. How will I customize the size of Modal2 only.

I have a custom class for global.scss. This is use for a uniformed modal lay out. But I only need one (1) small modal. How will I customize it for a certain modal like the layout for Thank you modal ?

Thank you

global.scss

.my-custom-class .modal-wrapper {    
    --height: 90%;
    position: absolute; 
    top: 5%;
    --width: 90%;
    border-radius: 25px;
    display: block;
 }

Feedback Form Modal 1

Thank you Modal 2

.html

 <ng-template #thanksContent>
  <ion-grid class=" ion-hide-lg-down">
    <ion-text class = "indent-left"><h2><b>Feedback submitted.</b></h2></ion-text>
      <img class = "center" src = "{{assistantThankyou|staticpath}}"/>   
  </ion-grid>
  </ng-template>

I tried to add <div class = ""modal-size> in my html but nothing happens.

Hope you can help me. Thank you

Answer 1

if you are creating modal using ionic ModalController then just apply cssClass which you are write in global.scss file.

for example

const modalCtrl = await this.modalCtrl.create({
  component: modalComponent,
  cssClass: 'my-modal-class'
})

global.scss

.my-modal-class{
 .modal-wrapper{
  height: 30%;
  width: 90%;
  border-radius: 15px;
}}

Answer 2

That old example in Ionic 5's documentation from your question did not work for me. This is the correct way to target the shadow part that has the .modal-wrapper class in Ionic 6:

ion-modal.my-custom-class::part(content) {    
    --height: 90%;
    position: absolute; 
    top: 5%;
    --width: 90%;
    border-radius: 25px;
    display: block;
 }