Modal for webpage Ionic 4 cssClass?

Ionic Framework ionic-v3
1

Hi,

Currently developing a webpage where I have a few modals.

I was wondering if anyone had encountered the same problem as I am:
When I add the cssClass to the modal, the position of the modal gets out of frame (top left corner of screen) and the width and height set to the cssClass doesn’t really have any effect.

If I don’t set a cssClass the modal is positioned perfectly in the middle of the screen, which is nice, but I would like to have the modal a bit wider and maybe a bit smaller in height. I tried to position it too but that doesn’t seem to work either.

Anyone encountered this issue before? And if so, how did you solve it?

Cheers!

2

in themes/variables.scss you can add the following inside the :root element
ex:

parent component ts file

const modal = await modalCtrl.create({
    ...,
    cssClass: 'custom-modal'
});

themes/variables.scss

.custom-modal .modal-wrapper {
    // add modal styling here
}
1 Like
3

Thanks man, unfortunately it didn’t do anything to the modal even with the wrapper :confused: Guess I have to settle for something less than perfect.

4

Hmm thats weird because that is how mine is working for version 4

you could try implementing that bit of style code on the specific page that displays the modal, but like i said, mine always work as a global style

if you post the relevant bits of code we might be able to determine the problem

5

Yeah, sure!

home.page.html

<ion-row>
  <div class="sidenav-div">
    <ion-button size="small" color="secondary" (click)="openModal()">Open</ion-button>
  </div>
</ion-row>

home.page.ts

 async openModal() {
    const myModal = await this.modalController.create({
      component: MyModalPage,
      cssClass: 'modalCss'
    });
    return await myModal.present(); 
  }

global.css

.modalCss .modalWrapper {
    width: 600px;
    height: 300px; 
}

Like I said, if I don’t include .modalWrapper-class it just sets itself to position x 0 and y 0, and information in the modal is missing. And if I include the modalWrapper-class it doesn’t change anything.

I’ll have you know that I’m working with a webpage, not a mobile device.

All the best

1 Like
6

Try .modal-wrapper instead of .modalWrapper

4 Likes
7

YES!!! I can’t believe I didn’t notice that from your first response. Thank you every so much.