[SOLVED] Can't resize modal on ionic v4

Hello to everyone, i’m working with ionic 4 with angular, and i’m having problems with the css4 encapsulation, i’ve found a solution for all the others problem, but i cannot resize a modal.

I’m creating the modal with this code

 let modal = await this.modalCtrl.create(
        component: UserModPage,
        cssClass: "wideModal"

And my scss is this

        opacity: 0.3 !important;

            width: 800px;

Neither the opacity has effect or the width, the chrome inspector doesn’t even show the class properties, im placing the css in global.css, file wich is working because i have other global styles for buttons and inputs an they are working really well.

Any suggestions?

1 Like

Solved, the problem was i misplacing the scss code in my global.scss

hello, i did same as you but it’s not working. Help please

The styles need to be added to a global stylesheet file (global.scss)

Sample css code:

.my-custom-modal-class   {
  --backdrop-opacity: 0.8 !important;

  .modal-wrapper {
    --height: 40% !important;
    position: absolute;

:white_check_mark: It works with Ionic 5

1 Like

Thank you! For Ionic6 I found this worked:
in global.scss
–width: var(–wide-modal);
in themes/variable.scss
:root {
–wide-modal: 60%;
and like you did in modalController.create, added cssClass:‘wide-modal’

I am doing this in Ionic 6 which I modified from Ionic 5 after upgrading. The original was from Issue 16852.

ion-modal.auto-height {
    --height: auto;
ion-modal.auto-height::part(content) {
    position: relative;
    display: block;
    contain: content;
ion-modal.auto-height .inner-content {
    max-height: 80vh;
    overflow: auto;

I then use it in a Vue component that takes in a custom width/height as props if need be.

        :class="[cssClass, 'auto-height']"
        :style="{ '--height': height, '--width': width }"
        <div class="inner-content">
            <slot />

ion-modal.popup-message-modal {
    --border-radius: 0.5em;

<script lang="ts">
import { defineComponent } from 'vue'
import { IonModal } from '@ionic/vue'

export default defineComponent({
    name: 'PopupMessage',
    components: {
    props: {
        cssClass: {
            type: String,
            required: false,
            default: 'popup-message-modal',
        isOpen: {
            type: Boolean,
            required: true,
        height: {
            type: String,
            required: false,
            default: '',
        width: {
            type: String,
            required: false,
            default: '95%',