Modal custom style not working

Ionic Framework Ionic Vue
1

I am trying to style Modal so it looks like actionSheet with custom content. I cant seem to target the right element or attribute to get this right. When I use a custom class, I can see it in the DOM but its CSS properties are not showing.

This is how I want the modal to look like - I can style ion-modal if I inspect DOM and style in Styles browser tab

Screenshot 2021-02-14 at 14.06.06
Screenshot 2021-02-14 at 14.06.06746Ă—1346 118 KB

Template:

<ion-button @click="openModal()">
	<ion-icon :icon="addCircle"></ion-icon>
</ion-button>

Script:

import {
  IonButton,
  IonIcon,
  modalController
} from "@ionic/vue";

import Modal from "./Modal";

import { 
  addCircle, 
  heart 
} from "ionicons/icons";

  methods: {
    async openModal() {
      const modalInstance = modalController;
      const modal = await modalInstance
        .create({
          component: Modal,
          cssClass: "custom-modal-class",
          componentProps: {
            context: this,
            modalInstance,
          },
        })

      return modal.present();
    }
  }

CSS:

// I tried both ion-modal and custom-modal-class
ion-modal { 
  --height: 320px; 
  margin-top: 500px; 
  border-radius: 50px 50px 0 0;
}
2

I have been running intro this same issue. I think you have to create a css file and include it in your main.ts file.

3

Thanks that worked. Though I feel like one should be able to do this in the style section of the Modal or Page.

1 Like
4

I’m glad it worked. It’s not possible because the style is scoped, it means that it’s visible only in the page it’s being executed; as modal is an external component, the styles won’t be applied inside your Modal Page.

5

Alternate, but deprecated working way also, right in your component scss:

::ng-deep ion-modal { 
  --height: 320px; 
  margin-top: 500px; 
  border-radius: 50px 50px 0 0;
}

One more way, if you would like to make your action sheets more complicated, with drag events, feel free to use

6

Not sure I understand… I am able to style everything else inside the modal though. The issue is only when targeting ion-modal.

7

Like I said, ion-modal is the “master” component let’s say, hence cannot be stylized using scoped styles. But that’s what I think from what I have read and noticed. I might be wrong thought.

1 Like
8

i managed to style the ion-modal by putting the following into the global.css file:

ion-modal {
  --border-radius: 4px;
  --width: 90%;
  --height: 90%;
}
9

i managed to style the ion-modal by putting the following into the global.css file:

ion-modal {
  --border-radius: 4px;
  --width: 90%;
  --height: 90%;
}

Edit:
If you create a Modal with ModalController.create you can address the cssClass in the global.css aswell:

component.ts:

 async openSignatureModal(data) {
    const modal = await this.modalCtrl.create({
      component: ScreenshotModalComponent,
      componentProps: { based64: data },
      cssClass: 'screenshot-modal',

      
    });
    modal.present();
  }

global.css:

.screenshot-modal {
  --border-radius: 4px;
  --width: 90%;
  --height: 90%;
}