Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Ionic 4 beta11] No .ios and .md classes on element depending on the platform

See original GitHub issue

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/giacomocerquone/Library/Android/sdk)
   NodeJS            : v10.3.0 (/Users/giacomocerquone/.nvm/versions/node/v10.3.0/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Describe the Bug .ios and .md classes are not added to the html structure and I can’t style stuff based on the platform

Steps to Reproduce Steps to reproduce the behavior:

Initialize an ionic 4 project
start with ionic serve or 2b. start with ionic serve -l

Related Code

.ios ion-button {
  color: #0ec254 !important;
}

<ion-content padding>
  <ion-button>My Button</ion-button>
</ion-content>

Expected Behavior That I could, in fact, style with the selector illustrated above.

Issue Analytics

State:
Created 5 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

brandyscarneycommented, Sep 25, 2018

@giacomocerquone If you wanted to keep the default for encapsulation (ViewEncapsulation.Emulated), you could write the following in the page’s scss:

home.page.scss

.md :host ion-button {
  --background: green;
}

The :host is what is important there.

I do agree that we could improve the documentation here. I’m just not sure where it would go since it is mostly Angular specific. Maybe we could have a theming section per framework? 🤔

1reaction

brandyscarneycommented, Sep 25, 2018

For some reason I thought we removed the mode-specific component classes, but you are correct you could also write this:

:host .button-md {
  --background: green;
}

Top Results From Across the Web

[Ionic 4 beta11] No .ios and .md classes on element ... - GitHub

The platform styles contains the info on changing the styles per mode. ... I'm going to close this since the original issue is...

Platform Styles - Ionic Framework

Ionic provides platform-specific styles based on the app's device. Styling the components to match the device guidelines allows the app to feel native...

Ionic 4 nav component WITHOUT Angular - Stack Overflow

1 Answer 1 · Make sure to have class="plt-desktop ios" mode="ios" attrs in HTML tag (or whatever os you want) · Make sure...

Overriding Ionic Framework root platform default with Angular ...

let mode = 'md'; // Determine if the device platform is ios or not if (platform.is('ios')) { mode = 'ios'; } // Set...

Ionic 5 UI Components Properties - Appery.io

Check this link for Ionic CSS utility classes. ... Buttons provide clickable elements used in forms or anywhere where simple, ... For iOS...