0

I'm trying to change the width of $ionicPopup; I've tried using the following css code, to import it onto cssClass: my-popup:

.my-popup {
      width: 400;
      }

But that didn't seem to work.

I've really got stuck there, and currently unable to find a solution.

Any help will be much appreciated. Thank you.

user6039980
  • 3,108
  • 8
  • 31
  • 57

2 Answers2

2

Place the following in the src/theme/variables.scss file; 

$popover-ios-width: 300px;
Lennart
  • 1,560
  • 5
  • 20
  • 38
Euler
  • 36
  • 2
2

It's actually quite straight forward, see the following example:

var pinPopup = $ionicPopup.show({
    templateUrl : 'app/user-profile/user-pin.html',
    title: '4-digit Security PIN',
    scope : $scope,
    cssClass: 'my-popup',
    buttons : [
        {
            text : 'Cancel',
        },
        {
            text : '<b>Save</b>',
            type: 'button-positive',
            onTap : function(e) {
                var val = document.getElementById('pin-output').value;
                $scope.userRow.password = val;
            }
        }
    ]
})

Now in your CSS simply do:

.my-popup .popup {
  width: 400px;
}
niczak
  • 3,897
  • 11
  • 45
  • 65
  • 2
    I think this solution is more accurate than the accepted one since doesn't changes the width of all popups in the app. – Musma Apr 10 '18 at 14:58