Customize Popup

ionic-v1
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.

2 Likes
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;}
1 Like
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 Likes
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.

10 Likes
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: …
}

1 Like
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.

2 Likes
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!!!

2 Likes
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