Reputation: 151
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
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'
}),
]
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