Device dependent styling

Ionic Framework ionic-v3
1

I want to set a specific class to ion-content and other tags in my project depending upon the device.
I have been trying this:
console.log("Constructor Invoked."); var x = navigator.appVersion.includes("Nexus 6"); console.log(x); if(x === true) { console.log('Entered if.'); // document.getElementsByTagName('body')[0].classList.add('myClass'); // document.getElementsByTagName('ion-content')[0].classList.add('myClass'); // document.getElementsByTagName("ion-content")[0].className += " myClass"; // document.getElementsByTagName('ion-content')[0].classList.add('myClass'); document.getElementsByTagName('ion-content')[0].classList.add('myClass'); console.log('myClass Added'); }
But no luck.
Can you please help?

My ionic info is:
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.13.0
ionic (Ionic CLI) : 3.13.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.7.0

System:

ios-deploy : 1.9.2 
Node       : v6.11.3
npm        : 3.10.10 
OS         : macOS High Sierra
Xcode      : Xcode 9.0 Build version 9A235

Misc:

backend : pro
2

Don’t mess with the DOM

Try something like this?

<ion-content [class]="getDeviceClass()">

getDeviceClass() {
  // probably better to use the Device plugin here...
  if (navigator.appVersion.includes("Nexus 6")) {
    return 'nexusclass';
  }

  // potentially other device checks

  return 'defaultclass';
}
1 Like
3

  1. Where would I need to write the CSS then?

  2. And how would I change other classes inside ion-content, for instance, I have a structure like:
    ion-content > div > div
    Innermost div has a class “innermost-div-class”, how would I apply this class with different styles for my particular device?

4

  1. Your css would go in your css files for whatever component you’re dealing with (likely a page given ion-content)

  2. You shouldn’t need to be applying this class all the way down because you can use css selectors using the parent class. If you did though, it would be the same process.

Sounds like you either need help in general, or to read the documentation for ionic…

1 Like
5

I am new to Ionic and been working on it for a few weeks, I was a bit confused so I asked.
Thanks for helping.
:slight_smile:

6

Good luck! The documentation is really good, don’t fall into the trap of modifying the DOM because it’s what you know how to do. Learn the correct way, it’s worth it.

7

Alright, I will definitely have a look now.