How to size a modal by ts file ionic 4

Capacitor
1

I would like to size a modal from the TS File and not by the Global SCSS File.

There is a simple code where you size the modal by the Global SCSS File.

HTML File

    <ion-content>
      <ion-button expand="block" fill="outline" (click)="onModal()">
        <ion-icon name="apps"></ion-icon>
      </ion-button>
    </ion-content>

TS File:

     export class HomePage {

      constructor(private modalController: ModalController) {}

      onModal() {
        this.dynamicPreview('Dynamic Modal');
      }

      async dynamicPreview(info: any) {
        const myModal = await this.modalController.create({
        component: DynamicModalPage,
        cssClass: 'dynamicModalCss',
        componentProps: {
            vInfo: info,
          }
        });
        return await myModal.present();
      }

    }

Global SCSS File:

    .dynamicModalCss {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        contain: strict;
        display: flex;
        justify-content: center;
        align-items: center;

        .modal-wrapper {
            width: 20rem;
            height: 40rem;
          }
    }

I have no idea about how to do this :frowning:

Thanks for your suggestions and help

2

You send your css as props and render that in the component.

Can I ask why do you want to do it in typescript instead of CSS? also, why are you putting that CSS in the global.scss file instead of the component CSS file?

3

Yes you can :slight_smile:

Because I want to change the size of it (width and height) and I can’t know the size before I get information about what I will display.
I hope it makes sense .

A simple example. A picture can have different size, and you don’t know the size of it until you have it.

For your second question. If I don’t put the modal css in the global.scss file I will not be able to give it another size. Just the full screen.
And it’s the only way I know :frowning:

4

You could also let your modal grow as big as your content (for example the image). In that case the browser does the heavy work.