[CSS]: CSS not applying corretly

[relez]

Hi there, I am working on a ListView that highlights the elements when the user taps on a specific item. I am trying to add a CSS style to make it looks like its selected but seems like its not adding the style. This is my HTML code:

<ListView #selectListView [items]="_auxSelectItems" (itemTap)="onItemTap($event)">
    <ng-template let-item="item">
        <Label [class]="'item item-content top-left-rounded top-right-rounded bot-left-rounded bot-right-rounded ' + (this._selectedItemsCheck[item.ID] ? 'item-selected' : '')" [text]="item.Description" textWrap="true" style="padding:10;"></Label>
    </ng-template>
</ListView>

In the onItemTap event I have this code...

onItemTap(event: ItemEventData) : void {
    let lb = <Label>event.view;
    lb.cssClasses.add("font-bold");
    // also tried:
    lb.className = "font-bold";
}

The font-bold rule is defined in a css file like this:

.font-bold {
    font-weight: bold;
}

Am I missing something? Thanks!

[NickIliev]

@relez the thing is that in this case the Angular navigation event (via nsRouterLink) is triggered before the itemTap event. This causes the application to navigate to the second page before any changes in the CSS are applied. So the solution would be either to move the navigation in the code behind (after the changes in CSS classes e.g. via RouterExtension) or to apply the changes in the CSS earlier for example using the touch event.

Example

    onItemTouch(event) : void {
        console.log("onItemTap");
        let lb = <Label>event.object;
        lb.className = "font-bold";
    }

and the HTML

<ListView [items]="items" class="list-group" >
    <ng-template let-item="item">

            <Label (touch)="onItemTouch($event)" [nsRouterLink]="['/item', item.id]" [text]="item.name"
            class="list-group-item"></Label>

    </ng-template>
</ListView>

[relez]

Hi @NickIliev, thanks for the quick answer. I am not navigating anywhere when the user tap on the item (Label), I just want to simulate a multi-select ListView.
Using your workaround the touch event fires multiple times. Did you notice that?

Thanks!

[NickIliev]

@relez you could try to change the CSS on a specific TouchAction.

[relez]

Hey @NickIliev, take a look at this example you will see what I mean. I hope this example help you to understand what I am trying todo.

https://github.com/relez/ns-angular-css.git

[NickIliev]

@relez the Touch event is triggered multiple times as it has 4 different states (up, down, move and cancel) known as TouchAction. To trigger the change only on one specific action you could do the folllowing

    onItemTouch(event:TouchGestureEventData) : void {
        let lb = <Label>event.object;
        switch (event.action) {
            case "up":
                console.log(" UP"); 
                // and for example, you could reset the style on up (or not depending on your UX requrments)
                // lb.className = "item item-content top-left-rounded top-right-rounded bot-left-rounded bot-right-rounded";
                break;
            case "down":
                console.log(" DOWN");
                lb.className = "item item-content top-left-rounded top-right-rounded bot-left-rounded bot-right-rounded item-selected";
                break;
            case "move":
                console.log(" MOVE");
                break;
            case "cancel":
                console.log(" CANCEL");
                break;
            default:
                break;
        }    
    }

Where onItemTouch is the touch event callback

 <Label (touch)="onItemTouch($event)" >

[relez]

Hi @NickIliev, thanks for the clarification. Unfortunately the css is not being applied in the view even with your suggestion only triggering in the DOWN event. I have updated the example at github https://github.com/relez/ns-angular-css.git so you can see what I am trying to do. The CSS rule I want to add/remove looks like this:

.item-selected {
    border-width: 1;
    border-color: #0063a4;
}

Also don't you think using the (itemTap)="onItemTap($event)" of the ListView its enough?, since it triggers only one time and I am able to get the label let lb = <Label>event.view; instance and play with it. Actually, I can change the text of the label using lb.text = "nativescript";, but CSS seems its not updating the view.
Can you take a quick look at it?

Thanks!

[NickIliev]

@relez thank you for providing the sample project. There are two things to notice - the way you are accessing your current View in the list view cell and the issue itself which seems that can be reproduced on iOS.

The first thing I want to notice is that you should access the unique Label and not the current list view cell view. When working with ListView we should consider that all cells are recycled and any changes applied to the current cell (via ItemEventData arguments) will be eventually reused and this would cause the side effect that the changes will be applied on reused cells (when the user scrolls). So the correct way to access and change a CSS style of any View would be while using a unique ID. (via the model in your case we can use the ID property of each item).

For example:

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array/observable-array";
import { Page } from "ui/page";
import { ListView, ItemEventData } from "ui/list-view";
import { Label } from "ui/label";
import { TouchGestureEventData } from "ui/gestures";

declare let UITableViewCellSelectionStyle: any;
let listview: ListView;


@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    private items: Array<any>;

    constructor(private _page:Page) {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
        this.items = [
            {id: 1, Description: "Item 1"},
            {id: 2, Description: "Item 2"},
            {id: 3, Description: "Item 3"},
            {id: 4, Description: "Item 4"},
            {id: 5, Description: "Item 5"},
            {id: 6, Description: "Item 6"},
            {id: 7, Description: "Item 7"},
            {id: 8, Description: "Item 8"},
            {id: 9, Description: "Item 9"}
        ];
    }

    onItemTap(args: ItemEventData) {
        console.log("args.view: ", args.view);
        console.log("args.view.id: ", args.view.id);
        let lb = <Label>this._page.getViewById(args.view.id);
        console.log("lb: ", lb);

        lb.className = "item-selected";

        // WORKAROUND: the bug is that we have to manually refresh the listview on iOS
        let listview = args.object as ListView;
        listview.refresh();
    }
}

and in the HTML

<GridLayout class="page">
    <ListView [items]="items" (itemTap)="onItemTap($event)" >
        <ng-template let-item="item">
            <Label [id]="item.id" [text]="item.Description" textWrap="true"></Label>
        </ng-template>
    </ListView>
</GridLayout>

The above approach is allowing us to change the style only for the specific Label and not for the label of the current cell (which will be reused and would cause when scrolling to apply the style on the newly reused cells and their labels).

The unexpected behaviour, which I am marking as a bug is that we need to explicitly call refresh for the changes to be rendered in the UI. This is happening only on iOS.

[NickIliev]

Test project demonstrating the above can be found here

[relez]

Thanks @NickIliev, I will keep an eye on the updates.