Increase width of Alert Controller

Ionic Framework
1

I would like to know, how can i increase width of an Alert Controller in ionic4.

I have tried many techniques but haven’t succeeded in any. I have created a stackblitz example for clarity. Here i have button on click of which, the alert appears but i want the alert to be more broad. I have also added a css variable to change the width but it also doesn’t work

ion-alert{
  --width: 400px;
}

StackBlitz example

1 Like
2

As you can see if you inspect you Alert in the Stackblitz, the Alert has a max-width: 280px;.
What you can do is add a own cssClass to the Alert while creating via the AlertController.

This Class is applied to the top <ion-alert> Element, so can edit stuff like you want, for example:

.myClass {
  .alert-wrapper {
    max-width: 400px;
  }
}

Note: This Class must be added in you global.scss

2 Likes
3

This is not working either.

4

Have you inspect this and check if your Class is applied correctly?

5

Adding ::ng-deep along with class name worked. Not sure how.

::ng-deep {
    .coupon-alert {
    --min-width: 400px;
    --max-width: 400px;
    --width: 400px;
  }
}
1 Like
6

In Pages Scss or global scss?

7

It can be on Pages Scss

8

I would avoid ng-deep.