Ionic v4 popup width adjustment

Ionic Framework
1

Hi everyone,

Could you please help me out on how to set the width of a popup in v4? I had used the below at v3 but they do not seem to work with v4. I am struggling with the new docs a bit but I see these variables in the ionic code for ex at popover.ios.vars.scss

For ex, I placed the below both at global.scss and at variables.scss. What am I doing wrong?

$popover-ios-width: 80%;
$popover-md-width: 80%;
$popover-wp-width: 80%;

Thanks,

Doug

2

I am not sure if this is the best/right way of doing it but I managed to style with the below. I was hoping the $popover-*-width would work but I had no success. I hope I am not misleading anyone with the below but thought of sharing my way out…

ion-popover {
&.popover-ios, &.popover-md {
div.popover-content {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 90%;
overflow: initial;
}
}
}

3

Yep I think too that using !important was unfortunately the way, but it works :wink:

I opened an Nice To Have feature request on Github about that https://github.com/ionic-team/ionic/issues/15036

4

Thanks Richards, appreciate the reply