Not working for me

[Luana Fernandes]

Hi. I have added the require ("nativescript-platform-css"); in the page I need to change the css and in my css I put

.ios1024 :host .grade {
  padding-top: 55%;
  padding-bottom: 55%;
}

and is not working. I also tried using /deep/ but no success.
If I removed the 1024 and only leave .ios :host .grade, it will work but I need the specific config for a 1024 screen.
Is there anything else I should have done?

[Luana Fernandes]

I have found another way to do it without plugins but will keep watching my question in case I need to use this plugin in future projects.
Thanks

[Nathanael Anderson]

@lumayara - Are you sure you are using the latest ns-platform and ns-platform-css?

[Isaac Hernandez]

This is not working to me too, I uses the last versión of ios, core modules and platform-css

[Nathanael Anderson]

@isaacfi -

1. Are you using using NS 4.x or 3.x
2. Are you using Angular; Vue, or Plain NativeScript.

[Isaac Hernandez]

1. 4.x
2. Angular

I've noticed that /deep/ works to override properties, but if I want to complement a class I have to avoid to use /deep/ I don't know if this is the right behavior.

[Gustavo Silva Teles]

I am using nativescript 4.0.1 and angular 5.1.0 and the latest version of nativescript-platform-css.

I'm using the iphone5s, iphone6 and iphonex classes and it works perfectly.
I follow the documentation instructions where I want to specify a resolution using ios640 and ios1242 but it does not work.

.ios640 :host .test { margin: 6px; width: 22px; line-height: 22px; font-size: 10px; }

[DeepakArora76]

Same for me.

• Device: Android. Using emulator to test the app.
• Dev Machine: MacOS
• Framework: Angular
• nativescript-platform-css: "^1.6.5",
• sass-loader: "~6.0.6"
• css-loader: "~0.28.7",
• tns-android: "4.0.1"
• tns-ios: "4.0.1"

This does not work:
.android480 :host button {
@extend %button-shared;
font-size: 19;
height: 44
}

This works
.android400 :host button {
@extend %button-shared;
font-size: 19;
height: 44
}

[DeepakArora76]

Appreciate your help on this.

[Nathanael Anderson]

@DeepakArora76 -

1. When starting up the application; what screen size does the platform-css say the device is?
2. Which emulator (i.e. what is its settings on it).

@gustavost26 the sizes are:
[1280,1024,800,600,540,480,400,360,320]
There is no 640 unless you add it to the list.

@isaacfi
Unfortunately /deep/ and/or :host are required with Angular because of the way it does CSS rewritting.

[Pat Buchanan]

Yeah I'm on NS4.1 and not using Angular, and I can't seem to get it to work either.

If I manually add class="ios" to a page then the iOS styling kicks in, so I know the CSS is correct.

Hey @NathanaelA can you just confirm if it should work with NS4x? Thanks for your help man!

[Pat Buchanan]

Ok, working now. It must have been related to the syncing of the modified code - stopped and started the compiler, uninstalled it off the devices and now it works fine. Thanks @NathanaelA!

[Nathanael Anderson]

@datanotion - Pat, thanks for the confirmation that you got it fixed in your case. 😀

[Vamsi]

Those are demo app page on a phone and tablet emulators, guess thats working,

Then I've added a grid layout like this the same page

and the css like this

.phone .home-grid{
background-color: red;
height:100;
}

.tablet.home-grid{
background-color: black;
height:100;
}

and grid colour stays white, it doesn't seems to pick up the css

if I just use this

.home-grid{
background-color: red;
height:100;
}

then its changing background colour on both the phone and tablet.

Am I missing anything here to get it working?

[Nathanael Anderson]

@yalva - That should work; I don't see anything obvious why it wouldn't. I'll try running a test and see what happens. I assume this is NS 4.x

[Vamsi]

Yes, it is NS 4.1.1

[Nathanael Anderson]

@yalva -
So I upgraded the project to be NS4.1.3 to verify no issues with 4.x

Css:

.homegrid {
    background-color: purple;
    height: 50;
}

.phone .homegrid{
    background-color: red;
    height:100;
}

I added a default .homegrid css; so that if the phone didn't override it; I would get a purple grid. 😁

XML:

 <StackLayout>
    <GridLayout rows="auto,auto">
    <StackLayout class="p-20">
        <Label text="ns-platform-css" class="h1 text-center"/>
        <TextView height="300" text="{{ data }}" editable="false" backgroundColor="#d3d3d3"/>
    </StackLayout>
        <Label tap="{{ tap }}" row="1" text="(c)2015-2018, Master Technology" class="text-center copyright"/>
    </GridLayout>
    <GridLayout class="homegrid">
    </GridLayout>
    </StackLayout>

Shows a red grid of 100px high after the copyright.

[Luana Fernandes]

Thanks for your help @NathanaelA !