Platform specific css in Ionic2

Ionic Framework ionic-v3
1

I want to style my element based on the platform it’s running. I tried .platform-ios .myClass{}, .platform-md .myClass{} as well as .ios{ .myClass{}} but nothing seemed to work. Is there any way to do this.

1 Like
2

Have you tried the showWhen tag?

<ion-fab right bottom showWhen="android">
        <button ion-fab color="danger">
            <ion-icon name="add">
            </ion-icon>
        </button>
</ion-fab>

showWhen=“ios” respectably for ios.

3

I want to style the same div for both ios nd android. Won’t it be a double task if I use 2 divs with showWhen for both the platforms.

4

Ahh sorry, I tought you needed to hide/show items depending on the platform.

Have you tryed the samples from the documentation?

Example html:

<button class="special" ion-button block">
    Some text
</button>

and the scss:

.

.ios{
	page-homepage {
		.special{
			background-color: red;
		}
	}	
}

.md{
	page-homepage {
		.special{
			background-color: green;
		}
	}
}
//default values not depending on the platform
page-homepage{
    .special {
        height: 200px
    }
}
9 Likes
5

Ohh thanks, it worked. I didn’t included the selector while styling that’s why it wasn’t working.

6

Hi, I know it’s from long ago but my css is not working according to your reply. Every time the code is executing ios rather then md for android in my app which i couldn’t figure out why!