Customize Popup


#1

Hi,

is there any solution like adding classes to customize popups container & header?

For instance, what can I do if I would like to change the background-color of the popup header, what can I do?

I may have different popup colors so I can’t just override ionic css.

thanks


#2

Hi,

I don’t know the best way to do it, but I already did it altering css’s class.


#3

Here’s an example of altering classes.


#4

may i add a class to my popup to be able to have different popup and alerts?

in order to be able to do :

.alert1.popup-head{background: red  !important;}
.alert2.popup-head{background: green !important;}

#5

You can customize everything to your need. For pop-ups I would suggest you to override these classes in your own css file:

.popup

.popup-head 

.popup-title 

.popup-sub-title 

.popup-body

.popup-buttons.row 

.popup-buttons .button 

#6

I don’t know if it is a good practice but you can do that :

$ionicPopup.show({
  template: "<style>.popup { width:500px; }</style><p>That's the popup content<p/>",
  title: 'MyTitle',
  subTitle: 'MySubTitle',
  scope: $scope,
  buttons: [
   { text: 'Annuler' },
   {
     text: '<b>Save</b>',
     type: 'button-positive',
     onTap: function() { console.log('...') }
   }
  ]
});

With the style tag in the template you can display a popup with the style you need without changing other popup style.


#7

Just want to say that this was a great solution, I was about to resort to javascript. Ideally though, it would be great if in popup creation there were a property that allowed you to add an ID to the popup - to distinguish them.

{
templateUrl: …,
scope: …,
popupID: …
}


#8

Setting id on popup would be great.
My user case is that i have one popup with three buttons and then i want style it flex-direction: column but only for that specific popup.


#10

What is the best way to change the pop-up (alert) to:

  1. remove all the white space used by the title,
  2. center the text
    ???

Edit: in the end I did:

.popup-head {
  padding: 0px;
  border-bottom: none;
}
.popup-body {
  padding: 20px;
  overflow: scroll;
  text-align: justify;
}

P.S.: it would be great if we could just do {title: false} to erase the title


#11

I know this post is kind old… but anyway…

This is how you can change the popup width:

1- First, add the “cssClass” value in the popup object (i.e. ‘myPopupClass’).
2- In your CSS create the ‘myPopupClass’ and edit the immediate popup class’ style this way:

.myPopupClass .popup {
width: 500px;
}

And there you are!!!


#12

Is there any way to update the “cssClass” for all the popups ?
so for other popups i can override the default cssclass value to change the design for other popups.


#13

You can customize ionic popup to override popup classes

read this good article about ionic color and theme customization - http://www.codeandyou.com/2015/08/How-to-customize-color-and-theme-of-ionic-popup.html


#14

Did anyone ever figure this out?

The question kept getting asked, but I think everyone misunderstood it.

Say you had 3 popups that use the ionic method Show, how can one add it a specific ID / Class dependent on what page or section the popup is showing on?

Is there a way to add an ID and not overwrite the styles that are currently there from Ionic.


#15

The answer is here: How to use custom css in popup?

You just need to add:

 var myPopup = $ionicPopup.show({
            scope: $scope,
            cssClass: 'yourclass',
 });

then you can target each part of the popup with you CSS. Here is also a guide to each component within the popup, http://www.codeandyou.com/2015/08/How-to-customize-color-and-theme-of-ionic-popup.html


#16

Is there anyway I can apply changes to only one popup,this codepen will make every popup reflect the custom css


#17

Hi!
and how to use html tag in popup?

//Popup
    $scope.showAlert = function() {
   var alertPopup = $ionicPopup.alert({
     title: 'Don\'t eat that!',
     template: 'It might taste good'
   });

   alertPopup.then(function(res) {
     console.log('Thank you for not eating my delicious ice cream cone');
   });
 };

if i write :
template: <div>'It might taste good'</div> //This error
i would luke use <div **width**> it is show upload progress


#18

template: "<div>This is the right format</div>"

Better you should use templateURL:


#19

Add the below code to your CSS file.
.popup-container .popup{
color:white;
background-color:#4c5a75;
}
.popup-container .popup .popup-title{
color:white;
}


#20

if i customize the popup design by adding the css like this which removes the titile of that page