nathanaela / nativescript-platform-css Goto Github PK

Hi there, I am creating Labels on the fly and I need to set a style to the Label, in my component, I import the css file but its not picking up the correct style, this is my code:

let title = new Label();
title.text = "My Title";
title.className = "font-16 my-title";
title.color = new Color("black");
container.addChild(title);

This is my css:

.phone :host .my-title {
    ...
}

Any idea? Thanks!

Any ideas? Here is the command and output:

$ tns plugin add @proplugins/nativescript-platform-css
npm ERR! code E404
npm ERR! 404 Not Found: @proplugins/nativescript-platform-css@latest

I have included the require("nativescript-platform-css") within the main.ts file. When I try to run the application an exception is thrown in the plugin (line 94).

// Setup Events
Page.on(Page.navigatingToFirst, setDevice); // Exception is thrown here (line 94).
Page.on(Page.showingModallyFirst, setDevice);

Exception:

JS ERROR TypeError: Events name(s) must be string.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Events name(s) must be string.

When I debug, the value of Page.navigatingToFirst is undefined. I'm not quite sure what the root of this issue is.

I am able to get the plugin to work by manually updating the event setup code in platformcss.js from this:

// Setup Events
Page.on(Page.navigatingToFirst, setDevice);
Page.on(Page.showingModallyFirst, setDevice);

To this:

// Setup Events
Page.on(Page.navigatingToEvent, setDevice);

Is that other event no longer available in the latest NS?

Hi!

Not sure if the creator of #22 is experiencing the same thing (there are too little details), but I am having some issues with applying the styles in Angular as well.

For example, in such a scenario (regular non-modal component) as below, the styles are applied only when using /deep/, whereas when using :host the styles get applied only to the first element of the ListView whereas the other items don't get the styles defined with the phone or tablet class. Since the Angular docs say that using /deep/ has been depreciated, I would prefer to avoid that use.

<ListView [items]="people$ | async" (itemTap)="onItemTap($event)">
      <ng-template let-item="item">
        <StackLayout class="card">
          <PeopleCard [profile]="item.profile"></PeopleCard>
        </StackLayout>
      </ng-template>
</ListView>

This works:

/deep/ .phone .card { width:300;  height:300; }
/deep/ .tablet .card { width:600;  height:600; }

This does not work:

.phone :host .card { width:300;  height:300; }
.tablet :host .card { width:600;  height:600; }

What am I missing?
Thanks!

When using /deep/ .ios Button, I noticed the css only being applied to all page elements except the ones inside the <router-outlet> in that same page.

Well, I am not entirely sure that is the issue here, but for some reason I am not able to apply the css to the certain elements I need to apply it to. /deep/ .ios .option-button is not working in my case.

Hi,

so I have 2 pages and for both of them, I'm using the tools.

I have welcome page and login page

in welcome, I have a button that goes to login page

I use the following code to go back from login to welcome in login.ts
goBackToMain(){ this.routerExtensions.back(); }

in login HTML page I use a button that on tab call the method
<Button text="Register" class="secondaryBtn" (tap)="goBackToMain()"></Button>

so when I click that button "Regester" and click login button in the welcome page the .iosXXX classes doesn't work

here is welcome page

this is what it should look like always

this is what happen when I click login again

Hi Nathan!

I am enjoying this plugin very much for defining responsive like pages. However, now I've run into an issue whilst using the OpenSans true-type font, where it seems that the space calculation does not work properly and sentences are "cut off" on iOS (haven't tried Android yet)

I've created an example project which should demonstrate the issue.

The idea of test-css.ts is to show the text stacked on a cell phone, and on a tablet show them in two columns. I've added the same texts twice (each in a WrapLayout), once with the default font and once with OpenSans.

On the iOS simulator's iPhone 7 (using regular css) all texts display correctly. However, on the iOS simulator's iPad Pro, which is where the CSS rules that use your plugin kick in, both OpenSans paragraphs have the last line cut off.

Any idea what might be wrong here?

The platform-css plugin does not work anymore. The app crashes on start time and shows the error message nsPlatform.screen is not a function on both Android and iOS. We are still using the same version of the plugin (1.5.0) in our NS 2.5 branch and our NS 3 branch as we did the weeks before and suddenly this error occurs.

Please tell me if you need more detailed information to find the cause of this issue.

Thanks in advance.

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?

Hi,

When I place the .androidXXX or .iosXXX classes on platform.android.css or platform.ios.css it doesn't work

app.modules.js

var nsPlatformCss = require('nativescript-platform-css');
if(isAndroid){
  nsPlatformCss.sizeGroupings(true);
}

platform.android.css

.android400 :host #welcomeBtnGrid .primaryBtn {
    font-family: "SF-Pro-Display-Medium";
    font-size: 30;
    width: 315;
    height: 52.42;
}

however, if I place the same code on component css class like welcome.android.css it works

Any guess?

The plugin works just fine in regular components in NativeScript with Angular, but not in app.component.

require( "nativescript-platform-css" ); is set in main.ts file, however styles in app.component.css are not applied to app.component.html layout. Same if required in app.module.ts. When using the same code in a placeholder component it works like a charm.

I'm using TabView as root navigation, therefore it would be nice if it was possible to set platform specific syles here as well.

Angular isolates component styles from other parts of application. It seems that /deep/ .ios .class-name breaks this isolation and styles are applied to other parts of the application as well. I tried .ios :host .class-name approach and it seems that this one doesn't break isolation.

It would be better for other users if you change /deep/ example on the read me file to the one with :host.

Running tns plugin add @proplugins/nativescript-platform results in

Not Found - GET https://registry.npmjs.org/@proplugins%2fnativescript-platform - Not found

Hi Nathanael,

do you have any plan to release a new version that includes all the new iPhone names like the max or xr?

Thanks

Great work as always Nathan!
I gave this plugin a shot and after adding this css

Button {
    background-color: red;
}
.android Button {
    background-color: purple;
}

The majority of the buttons show up as purple on my android device as expected. However when calling alert("welcome"); the alert button shows up as red. Additionally all buttons nested in any modal pages show up as red on android.

What's the proper usecase to get this to work in Ng2?

app.module.ts
require( "nativescript-platform-css" );

login.ios.css
.ios320 .someClass{
color:red;
}

Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.5.4 │ 2.5.4 │ Up to date │
│ tns-core-modules │ 2.5.2 │ 2.5.2 │ Up to date │
│ tns-android │ 2.5.0 │ 2.5.0 │ Up to date │
│ tns-ios │ 2.5.0 │ 2.5.0 │ Up to date

Doesn't seem to work.

None of the CSS is being constant in the entire application.

It is going to default after a while or user click.

Thank you for this awesome plugin.

There is a problem if you code in NativeScript-Vue. While .android / .ios class are added to <Page> element, when you create component, you can use StackLayout or every other parent element for it. That, of course, won't receive platform class.
Is there a way around it?

As an example this component in Vue:

<template>
    <FlexboxLayout orientation="horizontal"
        class="navigation"
    >
            <StackLayout v-for="item in navigation"
                :key="item.name"
            >
                <Label :text="item.name" />
        </template>
    </FlexboxLayout>
</template>

<style lang="scss" scoped>
.navigation {
    align-items: center;
    text-align: center;
    border-top-width: 1;
    background-color: $white-color;
    height: 50;

    .android & {
        height: 70;
    }
}
</style>

<script>
export default {
    name: 'navigation',
    data() {
        return {
            navigation: [
                {
                    name: 'Home page'
                },
                {
                    name: 'Test page'
                },
            ]
        }
    }
};
</script>

Plugin should be in es5 mode. it is not working with webpack bundle.
I need to have one extra plugin for this (uglifyJS), while it is already comes with nativescript-dev-webpack.
If possible please compile it and release it in es5 format.

The sentence in the description of Enhanced Modes is not finished. Information about size groupings is missing from the README file.

https://github.com/nathanaela/nativescript-platform-css#enhanced-modes
https://github.com/NathanaelA/nativescript-platform-css/blame/master/README.md#L70

How can I use the plugin without the need of requiring it in every page that uses .android and .ios?

I followed the instructions but the settings/colors are not changing in the OSs. Is this related to NS 3.0?

thanks!
Alex