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