CODEWITHSUNDEEP
androidioscssionic-frameworkionic3
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to apply same CSS to Android & IOS In Ionic APP

I am working in my Ionic App and I am facing the problem for the UI in IOS. Like I have added the CSS for the android and the common CSS but it is not working in the IOS.

My CSS:

ion-label.label.label-md {
    font-size: 14px;
    font-weight: 300;
}

ion-label.label.label-ios {
    font-size: 14px;
    font-weight: 300;
}

This is working fine in both Android & IOS but I have define separately for the both.

And The Common CSS:

ion-label.label {
    font-size: 14px !important;
    font-weight: 300 !important;
}

In this, It is working fine for the both but I have to define the !important for that.

So, I want to define the CSS that will work for both the Android and iOS.

Any help is much appreciated.

Upvotes: 0

Views: 1042

Answers (1)

Delwyn Pinto
Delwyn Pinto

Reputation: 612

Add your own CSS classes instead of modifying pre-existing ones. A CSS class with ion is a pre defined by Ionic and classes with md or ios in them are pre defined for the platforms android & ios respectively.

Instead, you should declare your own css class in the HTML and add in the the .SCSS file. This will override the pre defined classes and use the values you have defined. Therefore, your CSS should be

HTML

<div class="my-label"></div>

CSS:

.my-label {
    font-size: 14px;
    font-weight: 300;
}

If you are still unable to see the css being applied, check if the class is being applied correctly.

Upvotes: 2

Related Questions