Custom CSS couldn't apply for ionicPopup alert

ionic-v1
1

I’m using Angular-translate to translate my ionic 1 application. I’m able to translate the title of the popup but unfortunately I couldn’t add css for the title. Reason for apply css is that to apply the custom font face through css.

I’ve studied this stackoverflow answer as well.
http://stackoverflow.com/questions/32636833/ionic-how-to-use-cssclass-in-ionicpopup

As per the example I’ve included the css style in the external css file but it won’t apply it.
Here is my code.

                              var invalidUserPopup = $ionicPopup.alert({
                                                                       title: '<span class="{{lang}}">' + $filter('translate')('Error') + '</span>',
                                                                       template: '<span class="{{lang}}">{{"Invalid_Username_or_Password" | translate}}</span>',
                                                                       okText: $filter('translate')('Error') ,
                                                                       
                                                                       });

Here i’m changing the css class according to the selecte language and it is totally working the alert template (body). But it is not working with the title and the buttons.

This is the css class i want to apply

/font class for changing the sinhala language/
.sinhala {
font-family: ‘DL-Araliya…’;
font-weight: 100;
font-style: normal;
}

/font class for changing the tamil language/
.ti {
font-family: ‘Bamini’;
font-weight: 100;
font-style: normal;
}

Any suggestions?

2

Hi Amantha,

Even I didn’t got a solution to this problem, Adding CSS in Popup ,let me know if you find the solution.

Let me know if you need additional information.

Thanks and Regards,
Aditya

3

Hey adityajaiz,

What is your ionic.css version? I have created a sample project and in that it is working but the app I want to convert is still facing the issue.

Newly create project ionic version: Ionic, v1.3.2
Old project( Which is not working): Ionic, v1.0.0-beta.13

4

Than just update your ionic js and css files to v 1.3.2 what’s the problem

5

After updating some things are not working and lot of alignments are changed. That’s the issue :confused:

6

go to your element in f12 developer tools . Check whether the class you added is showing up there or not…and bro use latest
ionic bundle… you can use older ionic css file beta one only for your alignment thing but use the 1.3 ionic bundle js file… From my prospective functionality will not change much.

7

class is not getting apply. I checked it.

Thank you for the reply :slight_smile:

8

try using the 1.3 ionic js file… keep the ionic css file as it is …