CODEWITHSUNDEEP
htmlcssionic-frameworkpopup
user7035864
user7035864

Reputation:

Change the width of ionic popup

i want to change the width of a specifique popup in my ionic project without making an impact on the others.

 var alertPopup = $ionicPopup.alert({
     cssClass: 'popupg',
      title: coe,
      template: text
    });

Upvotes: 6

Views: 9430

Answers (3)

Aouidane Med Amine
Aouidane Med Amine

Reputation: 1681

if you are using Ionic 3

on your .ts file :

    const alert = await this.alertCtrl.create({
        header: 'Sorry',
        cssClass: 'my-custom-alert',
        message: 'message',
        buttons: ['Find by name ?']
    });

on your global.scss

.my-custom-alert .alert-wrapper {
  min-width: 450px !important;
}

popup before styling : enter image description here

popup after styling (min-width : 450 px )

enter image description here

i hope this help :)

Upvotes: 6

niczak
niczak

Reputation: 3917

The accepted answer does not address what the OP said in the sense that they wanted to customize the width of a specific popup and not necessarily all of them.

To do this try the following:

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

                if(val.length != 4) {
                    e.preventDefault();
                    var alertPopup = $ionicPopup.alert({
                        title: 'Invalid PIN length.',
                        template: 'Please enter a 4-digit PIN.'
                    });
                } else {
                    $scope.userRow.password = val;
                }
            }
        }
    ]
})

Note the use of the 'cssClass' property when we instantiate the popup.

Now in CSS you can simply do:

.popup-pin .popup { 
  height: 60%;
  width: 80%; 
}

Upvotes: 2

Chaoyenpo
Chaoyenpo

Reputation: 389

you can add style.css,like this.

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

you need modify the popup width.

style.css

/**
 * Popups
 * --------------------------------------------------
 */
  .popup-container .popup {
    width: 350px;
 }

want to help you.

Upvotes: 1

Related Questions