Customize the $ionicPopup width parameter not working in CSS


Hello All,

I am trying to create $ionicPopup on click on one button. If button click then my customized popup should show up. I have used template url parameter to load popup.

Why I am not able to increase its width size after certain limit. How can I achieve this? I am looking for something like left hand side image. My working code result is right hand side.

I have provided code pen url below.

CodePen :

PS : Do not compare content of dialogue (Popup).

Any help would be appreciated.


You need to override the width of the popup class. It is set to 250px. You could also use an $ionicModal, but here is how to fix it in a popup:

.popup {
  width: 100% !important;
  height: 100%;
  max-height: 100% !important;

Note you may not have to use !important (or you could always give the popup a custom class using cssClass) but for codepen you do:


Thanks for your reply. I will check in my actual code this thing work or not. How Can I use $ionicModal? I seen that people using $ionicModal only when they want to show image as a full part of popup.

And I can not use important then what is the other way? How can i override width of popup class?


I have changed little bit in popup type. Now I am using Confirm style popup, why buttons are not showing in the bottom of the popup.

Here is the updated codepen.