Platform specific css in Ionic2


#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.


#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
    }
}

#5

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