CODEWITHSUNDEEP
cssionic-frameworkionic2
Anuj
Anuj

Reputation: 151

platform specific css Ionic 2

I am creating app on ionic where UI is looking good on Android but it is not ok for Ios.. I have header bar like 

 <ion-toolbar class="subheader" >
    <ion-title class="subheader0">STEP 1 </ion-title>
    <ion-title class="subheader1">Verify your details to proceed. </ion-title>
    <ion-title class="subheader2">Continue</ion-title>
  </ion-toolbar>

This is showing in Android but only last line (continue) is showing on ios subheader. Now what to do in platform specific css ?

Upvotes: 4

Views: 4514

Answers (1)

user1752532
user1752532

Reputation:

platform specific css is written with the prefixes wrapped around the relevant sass

windows

.wp{
  /// styles
}

android

.md{
  /// styles
  // default style during developmnent
}

apple

.ios{
  /// styles
}

the default development style can be changed in the app.module.ts

imports: [
   IonicModule.forRoot(MyApp,{
          mode:'ios'
   }), 
]

Ionic docs reference

In order to modify the toolbar you can target the ionic sass variables for the toolbar specifically

https://ionicframework.com/docs/api/components/toolbar/Toolbar/#sass-variables

Upvotes: 4

Related Questions