NativeScript 2.0 Custom Components and CSS

Question

I'm having an issue with NativeScript 2.0 CSS and custom components. There seems to be a giant gap in my knowledge and I'm missing something vital that is non-obvious.

Take an empty NS 2.0 app created with

$ tns create test --ng

Delete the contents of app.css (to prevent side effects).

Change app.component.ts:

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    template: `
    <StackLayout orientation="vertical">
        <Label text="Label in first StackLayout"></Label>
        <StackLayout orientation="vertical" 
                     style="width: 80%;background-color: red;">
            <Label text="Label in second StackLayout"></Label>
        </StackLayout>
    </StackLayout>
    `,

})
export class AppComponent {}

Pretty basic stuff. Produces the following expected result:

Let's try to convert that inner StackLayout into a reusable component.

custom.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "Custom",
    template: `
    <StackLayout orientation="vertical" 
                 style="width: 80%;background-color: red;">
        <Label text="Label in second StackLayout"></Label>
    </StackLayout>
    `,

})
export class CustomComponent {}

Change the app.component.ts

import {Component} from "@angular/core";
import {CustomComponent} from "./custom.component"

@Component({
    selector: "my-app",
    directives: [CustomComponent],
    template: `
    <StackLayout orientation="vertical">
        <Label text="Label in first StackLayout"></Label>
        <Custom></Custom>
    </StackLayout>
    `,

})
export class AppComponent {}

Now the output looks like this:

The background color is applied but the width is not.

I even tried:

<Custom style="width: 80%;"></Custom>  /* Does this even make sense? */

to no avail.

I realize percentages are experimental but suspect the error is in my code rather than NativeScript.

Where did I go wrong?

Nikolay Tsonev · Answer 1 · 2016-06-16T14:00:24.787

3

I reviewed your code in the given code snippet and found that it could be NativeScript issue. At the moment changing the width of the StackLayout in your CustomView using inline style will be working only on Android. To change the width of your CustomView using % for both platform at the moment you should setup this property in your css file and bind cssClass property.

custom.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "Custom",
    template: `
    <StackLayout orientation="vertical" 
                 [cssClass]="styleView" style="background-color: red;">
        <Label text="Label in second StackLayout"></Label>
    </StackLayout>
    `,

})
export class CustomComponent {

      public styleView="customViewStyle";

}

app.css

.customViewStyle{
    width:80%;
}

edited Jun 16 '16 at 14:00

answered Jun 09 '16 at 09:10

Nikolay Tsonev

1,919
3
16
29

I just checked Android. You're right; works fine. Unfortunately I can't get iOS to change even with CSS style (which still works in Android). Thanks for the insight – Wainage Jun 09 '16 at 14:08
I am sorry for the delay in replying. I made a little research and edited my answer above. Possible fix for this issue could be to bind `cssClass` property and than to set class name. I tested it on both `iOS` and `Android` and it should work normally on both platforms. – Nikolay Tsonev Jun 16 '16 at 14:09

NativeScript 2.0 Custom Components and CSS

1 Answers1