# Ion-modal width

**URL:** <https://forum.ionicframework.com/t/ion-modal-width/188685>\
**Category:** Ionic Angular\
**Created:** [May 3, 2020, 10:07pm UTC](https://forum.ionicframework.com/t/ion-modal-width/188685 "2020-05-03T22:07:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bastok](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bastok](https://forum.ionicframework.com/u/Bastok)\
**Post date:** [May 3, 2020, 10:07pm UTC](https://forum.ionicframework.com/t/ion-modal-width/188685/1 "2020-05-03T22:07:51Z")

</div>

Where the hell are we supposed to set those css custom properties?

[CSS Custom Properties](https://ionicframework.com/docs/api/modal#css-custom-properties)  
|`--height`|Height of the modal|  
|`--max-height`|Maximum height of the modal|  
|`--max-width`|Maximum width of the modal|  
|`--min-height`|Minimum height of the modal|  
|`--min-width`|Minimum width of the modal|  
|`--width`|Width of the modal|

i tried in the app.component.scss, variables.scss and global.scss… nothing works

---

<div class="post-metadata">

**Author:** ![nirman99](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@nirman99](https://forum.ionicframework.com/u/nirman99)\
**Post date:** [May 4, 2020, 1:58am UTC](https://forum.ionicframework.com/t/ion-modal-width/188685/2 "2020-05-04T01:58:43Z")

</div>

I pass a css class (cssClass) when creating the modal. then adjust size in global.scss.

```auto
....modalProvider.create({
cssClass: 'customModal'
....
})

global.scss

customModal {
  modal-wrapper {
    width:90%;
    ...
  }
}

```

---

<div class="post-metadata">

**Author:** ![Bastok](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bastok](https://forum.ionicframework.com/u/Bastok)\
**Post date:** [May 4, 2020, 9:18am UTC](https://forum.ionicframework.com/t/ion-modal-width/188685/3 "2020-05-04T09:18:59Z")

</div>

Thx this works.  
Once again, shadow DOM makes me loose a day of research because of lack of documentation, poor implementation.

---

<div class="post-metadata">

**Author:** ![abarke](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@abarke](https://forum.ionicframework.com/u/abarke)\
**Post date:** [May 7, 2024, 5:00pm UTC](https://forum.ionicframework.com/t/ion-modal-width/188685/4 "2024-05-07T17:00:15Z")

</div>

In VueJS this works a treat:

Vue

```html
<ion-modal class="messages">

```

CSS

```css
ion-modal.messages {
  --width: 61.8%;
  --height: 81.6%;
}

```