how to clear the radlistview item gray line ?

5 posts, 0 answers
  1. License
    License avatar
    27 posts
    Member since:
    Oct 2016

    Posted 19 Oct Link to this post

    Hi,

     I use the radlistview to show some selectors,android is show correct ,but ios bring some gray line in the item,how can i clear the gray line ?

    the ui as attach file .

    Thanks a lot .

  2. License
    License avatar
    27 posts
    Member since:
    Oct 2016

    Posted 19 Oct Link to this post

    follow my code 

    my html

    <GridLayout>
                    <RadListView [items]="dataItems" row="0" (itemTap)="onItemTap($event)" class="selector-list-group">
                        <template tkListItemTemplate let-item="item" class="m-t-20">
                            <GridLayout class="">
                                <Label [class]="item.isSelected ? 'h4 list-selected':'h4 list-normal'" text="{{item.name}}"></Label>
                            </GridLayout>
                        </template>
                        <ListViewGridLayout tkListViewLayout  spanCount="5"></ListViewGridLayout>
                    </RadListView>
                </GridLayout>

     

    my css 

     

    .selector-list-group {
        .selector-list-group-item {
            text-align: center;
            vertical-align: middle;
            padding: 5;
            font-size: 14;
        }
    }
     
    .list-normal {
        color: $btn-color;
        background-color: transparent;
        border-color: $btn-color;
        border-width: 1;
        border-radius: 10;
        padding: 3 1;
        text-align: center;
        margin: 0 3;
    }
     
    .list-selected {
        color: $white;
        background-color: $btn-color;
        border-color: $btn-color;
        border-width: 1;
        border-radius: 10;
        text-align: center;
        padding: 3 1;
        margin: 0 3;
    }
  3. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    70 posts

    Posted 19 Oct Link to this post

    Hi License,

    Thank you for reporting your problem and for the given code.

    I try to recreate your problem, unfortunately I was unable to reproduce this behavior, while using the below-given code sample. For your convenience I am attaching the sample project, where I test the given scenario. Regarding to that you could verify, whether you have set in your CSS file border-width and border-color for the GridLayout
    Let me know whether this helps. If you still experience problems please give me some more info about the problem or sample project,whichcould be debugged locally. Thus I will do my best to provide more to-the-point fix.
    app.component.html
    <GridLayout>
                    <RadListView [items]="dataItems" row="0"  class="selector-list-group">
                        <template tkListItemTemplate let-item="item" class="m-t-20">
                            <GridLayout class="gridLayoutStyle">
                                <Label [class]="item.isSelected ? 'h4 list-selected':'h4 list-normal'" [text]="item.name"></Label>
                            </GridLayout>
                        </template>
                        <ListViewGridLayout tkListViewLayout  spanCount="5"></ListViewGridLayout>
                    </RadListView>
    </GridLayout>

    app.component.ts
    import {Component} from "@angular/core";
     
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
    export class AppComponent {
        public dataItems:Array<any>;
     
        constructor(){
            this.dataItems=[];
            this.dataItems.push({
                name:"Name1",
                isSelected:true
            });
            this.dataItems.push({
                name:"Name2",
                isSelected:true
            });
            this.dataItems.push({
                name:"Name3",
                isSelected:true
            })
        }
    }

    app.css
    .selector-list-group-item {
            text-align: center;
            vertical-align: middle;
            padding: 5;
            font-size: 14;
    }
     
      
    .list-normal {
        color: red;
        background-color: transparent;
        border-color: green;
        border-width: 1;
        border-radius: 10;
        padding: 3 1;
        text-align: center;
        margin: 0 3;
    }
      
    .list-selected {
        color: white;
        background-color: green;
        border-color: blue;
        border-width: 1;
        border-radius: 10;
        text-align: center;
        padding: 3 1;
        margin: 0 3;
    }

    Thank you in advance for your cooperation.

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. License
    License avatar
    27 posts
    Member since:
    Oct 2016

    Posted 20 Oct in reply to nikolay.tsonev Link to this post

    Hi nikolay.tsonev,

         According to your method I set up the border-width & border-color , the gray line still is showing , as attach file look like.

    and i set up a sample with the related code on github here ,but when the load app.componet.html has an error

    file:///app/tns_modules/@angular/compiler/bundles/compiler.umd.js:16951:103: JS ERROR Error: Could not compile 'TKListViewItemDirective' because it is not a component.

     

    please help me check it.

    thanks a lot ~

  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    70 posts

    Posted 20 Oct Link to this post

    Hi,
    The below-given error has been caused due to fact that you have add `LISTVIEW_DIRECTIVES` in bootstrap  instead of `declarations`. Your main.ts file should look like this:
    import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
    import { NgModule } from "@angular/core";
    import { AppComponent } from "./app.component";
    import { LISTVIEW_DIRECTIVES } from 'nativescript-telerik-ui/listview/angular';
     
    @NgModule({
        declarations: [AppComponent, LISTVIEW_DIRECTIVES],
        bootstrap: [AppComponent],
        imports: [NativeScriptModule],
    })
    class AppComponentModule {}
     
    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    This should resolve the problem with app build. About the second problem, I am still unable to recreate the problem with right gray border. It could be something related with nativescript-theme-core pluginunfortunately there are some missing resources. If you still experience problems please send me the missing CSS files, or update the project in your repo, which will allow to debug further your application.

    Hope this helps.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top