Customize the $ionicPopup width parameter not working in CSS


#1

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 : http://codepen.io/skpatel/pen/QbzzbV

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

Any help would be appreciated.


#2

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: http://codepen.io/brandyshea/pen/bdOzWG


#3

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?


#4

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.