[SOLVED] Can't resize modal on ionic v4

Ionic Framework ionic-v3
1

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"
      }
    );
    modal.present();

And my scss is this


    .wideModal
    {
        opacity: 0.3 !important;

        .modal-wrapper 
        {
            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
2

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

3

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

4

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
5

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

6

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.

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

<style>
ion-modal.popup-message-modal {
    --border-radius: 0.5em;
}
</style>

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

export default defineComponent({
    name: 'PopupMessage',
    components: {
        IonModal,
    },
    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%',
        },
    },
})
</script>