Ionic 2 different styling on different platforms

Hello,
This seems like a pretty basic question but I am having trouble figuring it out. What I would like to do is to create different styling for different platforms. As an example if I wanted a font style to be a little bigger on the Windows platform as compared to the Android platform, I thought I could do something like this (but it is not working):

   .platform-windows {
  .label-text {
  padding-left: 2px;
  padding-top: 2px;
  font: Arial Helvetica;
  font-size: 1.2em;
  word-wrap:break-word;
  }

}

.platform-windows {
.label-text-italic {
@extend .label-text;
font-size: 1em;
font-style: italic;
}
}

.platform-android {
.label-text {
padding-left: 2px;
padding-top: 2px;
font: Times;
font-size: .85em;
word-wrap:break-word;
}
}
.platform-android {
.label-text-italic {
@extend .label-text;
font-size: .7em;
font-style: italic;
}
}

I put this code in the scss file for the page that uses this style. Is it possible to create different styles for different platforms?
Thanks,

Jon

Hey Jon,

This links may help:


Regards,

Duy

Thanks for the reply Ruy but I wasn’t really looking to change the default styles. I am trying to use custom styles based on the platform that the application was running on.

I believe I found a solution but I do have two questions. Before the questions, here is the solution that I came up with:

In the SASS file I have two styles:

.label-text-larger {
padding-left: 2px;
padding-top: 2px;
font: Times;
font-size: 1.2em;
}

.label-text {
padding-left: 2px;
padding-top: 2px;
font: Arial Helvetica;
font-size: .80em;
}

Then in my HTML file I have lines like this:

<td colspan=4 class="top-border left-border right-border " [ngClass]="textStyle">PRODUCT CODE</td>

and finally in my typescript file I set the textStyle property based on the platform like this:

if (this.platform.is(‘ios’) || this.platform.is(‘android’)) {
this.textStyle = “label-text”;
}

So my first question is: Is this the best way to set a style based on the platform?

My second question is: If I try this: if (this.platform.is(‘windows’)) {} and run the code on a Windows 10 tablet, it does not detect that the app is running on a Windows device. What is the correct string to use for a windows device? I did look though the API and tried using the “platforms” api but the array that was returned was empty.

Thanks

Jon

Hey Jon,

on a website, we would probably check the platform and set a class on the body tag, e.g or etc. Then we could define your css classes in sass like this:

.android {
  .label-text { font-size: 0.8em }
}

.windows {
  .label-text { font-size: 1.2em }
}

Since you already know what platform it will run on, we could probably create a platform specific CSS and get rid of the platform class.

That being said, ionic offers a lot of reusable components that are customizable. By not using their css you will probably miss out on their components as well.

Good luck!

@hoffmanjon I’ve been having similar issues. I think the goal of “write once, run anywhere” just isn’t realized yet. My code looks good when simulated on multiple devices of the same general type – Android phone, Windows phone, “any” phone. Delivered from a browser, though, yuck. (Similarly, code that looks good on a phone looks bad on a tablet.) I’ve got a lot of work to do, and it looks as though I have to break some of the things that were “natural” for phones in order to make it happen. It feels as though “having a native app experience on a portrait-oriented phone” was the framework goal, and “building a PWA” is a tacked-on afterthought. I’m not complaining, because having a tool for hybrid development is amazing. But I do feel your pain.

FWIW, I’m using ngStyle and ngClass in a very similar way to what you posted. I have no idea if it’s best practice (I suspect it isn’t), but I’m figuring things out as I go.