- Steve McNiven
I recently had to modify my app to support tablets so I thought I’d share a super easy way I found to add custom styling. So I mean the app works on tablet but the UI is just stretched, not really optimizing the space.
So lets assume this setup (omitting JS since it doesn’t apply)
So lets add our custom tablet layout. Just copy\paste main.xml and rename to:
So NativeScript is smart enough to know which XML file to load based on the naming convention… all the other files (JS\CSS) load as normal; so we’re still loading main.css.
If you create a new file named main.minWH600.css then like the XML it’d load that one. The problem I’ve found is there’s a lot of shared styling between the two so I don’t love having an entirely separate file.
So here’s the solution I came up with…
Open your main.minWH600.xml file and on the root node, add\append a class name like .tablet
So now in your CSS you can target with a heavier selector, no need to have multiple files!