I'm facing issue in removing separator line after each list item and not able to change the separator line color.
I have tried separatorColor="transparent" property in Listview tag and in CSS but both of them are not working.
I have tried SeparatorVisibility="None" property also, but no luck.
I have tried this solution provided by GitHub, but it is not working.
Here is the code :
<GridLayout row="1" class="shop-list-container">
<ListView [items]="rewardsPageData?.shops" class="list-group" height="{{rewardsPageData?.shops?.length * 75}}" separatorColor="transparent">
<ng-template let-shop="item">
<GridLayout class="shop-item list-group-item" columns="2*, 6*, 2*" rows="*, auto" (tap)="goToShopDetails(shop.id)">
<Image src="{{shop.logoImageUrl}}" class="thumb img-circle" col="0" row="0" rowSpan="2" horizontalAlignment="left"></Image>
<Label class="shop-name" [text]="shop.title" row="0" col="1"></Label>
<Label class="shop-type" text="{{shop?.category}}" row="1" col="1"></Label>
<Label text="See location" class="see-location-text" textWrap="true" col="2" row="0" rowSpan="2" horizontalAlignment="right"></Label>
</GridLayout>
</ng-template>
</ListView>
</GridLayout>
I created an isolated example with setting separator-color to transparent in CSS and works just fine for me in iOS. Notice the ListView rule in app.css.
It works equally well if you remove the CSS rule and set separatorColor="transparent" to the ListView object in home.component.html.
Add this following line in your _app-common.scss file
ListView { separator-color: transparent; }
Also, when creating a ListView, use class = "list-group"
Related
I am trying to achieve the following:
I tried achieving this with a GridLayout and only get one of the following two things working:
The space between the Label and the StackLayout is filled (label is
stretched), but scrolling will not work when adding more labels into
the StackLayout
Scrolling will work when more labels are added into
the StackLayout, but when only one label is showed for example, the
label before the StackLayout will not stretch
Is there any way to achieve such a thing? GridLayout is not necessarily needed, but I tried several ways and could not find any way of doing this.
example code of (1)
<Page class="page dark">
<ScrollView backgroundColor="red">
<GridLayout rows="*, auto" height="100%" backgroundColor="blue">
<Label backgroundColor="green">Top Label</Label>
<StackLayout row="1" backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
example code of (2):
<Page class="page dark">
<ScrollView backgroundColor="red">
<GridLayout rows="*, auto" backgroundColor="blue">
<Label backgroundColor="green">Top Label</Label>
<StackLayout row="1" backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
I wanted to achieve this for months and I finally found a working solution, for iOS and Android.
The solution is to use FlexboxLayout instead of GridLayout. When placed in a ScrollView, FlexboxLayout will take the whole available height if it is not tall enough. If it is taller than the ScrollView, it will be scrollable.
Here is the solution for your example:
<Page class="page dark">
<ScrollView backgroundColor="red">
<FlexboxLayout
flexDirection="column"
justifyContent="space-between"
alignItems="stretch"
backgroundColor="blue"
>
<Label backgroundColor="green">Top Label</Label>
<StackLayout backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</FlexboxLayout>
</ScrollView>
</Page>
I'm getting:
Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
My UI performance is very crappy on Android. It seems pretty smooth on iOS. I'm trying to figure out what could be the issue. This one error crops up for me. I'm running "nativescript-angular": "^8.0.0",
<ScrollView [visibility]="isBusy ? 'collapsed' : 'visible'" #sv>
<GridLayout rows="auto,auto,auto,auto" id="t2" columns="*" class="template_body">
<GridLayout row="0" col="0" #wv1wrapper>
<!-- <web-view id="instruction-wv" #wv1></web-view> -->
<template-text [data]="lessonDetail.instruction" *ngIf="lessonDetail.instruction" [screenwidth]="screenWidth"></template-text>
</GridLayout>
<StackLayout row="1" col="0" class="main-img">
<Image [src]="(lesson$ | async)?.thumbUrl" #imgref [data-image]="(lesson$ | async)?.imageUrl" (tap)="modalImage($event);"></Image>
</StackLayout>
<GridLayout row="2" col="0" #wvwrapper>
<!-- <web-view id="wv" #wv></web-view> -->
<template-text [data]="lessonDetail.body_text" [version]="version" *ngIf="lessonDetail.body_text" [screenwidth]="screenWidth"></template-text>
</GridLayout>
</GridLayout>
This is a template that is pulled into a router-outlet that looks like this in the master template:
<FlexboxLayout class="contentbody" [visibility]="isBusy ? 'hidden' : 'visible'" [data-template]="template_id">
<Label [text]="error" *ngIf="error"></Label>
<router-outlet></router-outlet>
</FlexboxLayout>
Also on that page, I do have a listview inside of a stacklayout.
<StackLayout row="0" >
<StackLayout class="vocab-notes">
<Label *ngIf="vocabArray" class="h3 section-title" text="Vocabulary"></Label>
<ListView [items]="vocabArray" id="vocablistview" (itemTap)="onItemTap($event)" class="list-items">
<ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
<GridLayout columns="*" rows="auto,auto" [class.odd]="odd" [class.even]="even" class="vocab-list">
<FlexboxLayout col="0" row="0" class="vocab-list-item-layout">
<Label [text]='item.label' textWrap="true" [id]="item.id" class="h3 vocab-list-item" (tap)="showVocab($event)"></Label>
</FlexboxLayout>
</GridLayout>
</ng-template>
</ListView>
</StackLayout>
I know its late for you but if someone is looking for this in future, so if you are getting below in console on any page you load.
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
You just need to give your scrollView a height, try different heights like in my case I need 650
<Page class="main" actionBarHidden="true">
<StackLayout class="gradient-bg">
<ScrollView orientation="vertical" height="650"> <!-- Here height is 650 -->
<StackLayout>
<GridLayout rows="50" class="page-header">
<Label
row="0"
class="fa label-back"
:text="'fa-arrow-left' | fonticon"
v-on:tap="navigateTo('app')"
/>
<Label text="Plot Suggestion" row="0" class="lbl-heading" horizontalAlignment="center" />
...
...
I have the following code:
<GridLayout row="7" col="0" colSpan="3" rows="*" cols="*">
<RadListView [items]="sourcesOptions" height="100%">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal">
<Switch [checked]="true" class="switch"></Switch>
<Label [text]="item.label" textWrap="true" marginTop="15"></Label>
</StackLayout>
</ng-template>
<ListViewGridLayout tkListViewLayout itemHeight="200" scrollDirection="Vertical" spanCount="2"></ListViewGridLayout>
</RadListView>
</GridLayout>
It is working on Android, but on iOS it isn't showing anything.
Note
I don't know if this can be related to the issue, but I get the items from a rest service.
Any help is appreciated!!
The problem was with the height when the items are async, in that case I needed to set the height manually to the parent layout of the RadListView component (The GridLayout in my case).
It didn't work if I set a height with percentage (100%), it had to be a fixed number, it was very inconvenient because the number of items are not always the same, so I created a function to set the height according with number of items received.
This is the code that fixed the issue:
<GridLayout row="7" col="0" colSpan="3" rows="*" cols="*" [height]="setHeight()">
<RadListView [items]="sourcesOptions">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal">
<Switch [checked]="true" class="switch"></Switch>
<Label [text]="item.label" textWrap="true" marginTop="15"></Label>
</StackLayout>
</ng-template>
<ListViewGridLayout tkListViewLayout itemHeight="70" scrollDirection="Vertical" spanCount="2"></ListViewGridLayout>
</RadListView>
</GridLayout>
Try a height value on the RLV component like height="100%" so it fills the parent. iOS doesn't do auto layouts the same android does, that's why you run into this :)
You haven't provided a rows or columns definition for your GridLayout. The RadListView will likely show up if you do:
<GridLayout row="7" col="0" colSpan="3" rows="*" columns="*">
I'm developing some app made on nativescript. Recently, i see that my app is more like website not an app, beacuse of how navigation works.
I'm having bottom nav (atached - this grey with 5 icons) that is used to load proper views.
But when i click on home or any other icon, new view is loaded, but also nav is 'reloaded'. So it will not stay in place but load with new view. My question is - is possible oto have static botom bar ? I've tried 2 plugins found on marketplace, but without success. Thanks for and help.
<Page class="page" loaded="loaded" xmlns:header="components/header" xmlns:footer="components/footer">
<GridLayout rows="120,*,60">
<StackLayout row="0">
<!-- Common header -->
<header:header/>
</StackLayout>
<ScrollView row="1" verticalAlignment="top" class="scrollview" tap="{{ loadPage }}">
<StackLayout class="redeem">
<Label text="Enter your code below to redeem your reward" class="info" textWrap="true"></Label>
<Label text="Code" class="info code" textWrap="true"></Label>
<TextField />
<Button text="Redeem" class="button blue"></Button>
</StackLayout>
</ScrollView>
<StackLayout row="2">
<!-- Common footer -->
<footer:footer/>
</StackLayout>
</GridLayout>
</Page>
:
<AbsoluteLayout class="footer" loaded="menu" horizontalAlignment="center" xmlns:sd="nativescript-ui-sidedrawer">
<GridLayout rows="auto" columns="*,*,*,*,*" horizontalAlignment="center">
<Label row="0" col="0" class="fa" text="" tap="{{ mainPage }}"></Label>
<Label row="0" col="1" class="fa" text="" tap="{{ creditPage }}"></Label>
<Label row="0" col="2" class="fa" text="" tap="{{ seatPage }}"></Label>
<Label row="0" col="3" class="fa" text="" tap="{{ refs }}"></Label>
<Label id="openMenu" row="0" col="4" class="fa" text="" tap="toggleDrawer"></Label>
<!--<Label id="openMenu" row="0" col="4" class="fa" text="" tap="{{ loadPage }}"></Label>-->
</GridLayout>
</AbsoluteLayout>
You could use DockLayout and dock the content to the bottom (Angular example here)
Also in the upcoming release 4.0.0 of NativeScript (expected April-2018) will provide support for different root views (apart from Page) meaning you could create bottom static layout like GridLayout or even better a bottom TabView (also coming for Android in 4.0.0) and create Frame in the upper layout for your dynamic content. (Look here)
I have a drawer in my Dashboard page and every Label is being clipped, I have tried different things but no luck :(
This is my Drawer code:
<!-- >> sidedrawer-over-navigation-drawer -->
<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true">
<drawer:RadSideDrawer.drawerContent>
<GridLayout rows="75, *" columns="300" class="mainMenuContent">
<StackLayout row="0" verticalAlignment="middle" horizontalAlignment="center">
<Label text="Main Menu" class="mainMenuHeader" />
</StackLayout>
<lv:RadListView items="{{ menuItems }}" row="1" class="mainMenuItems">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<GridLayout rows="50" columns="50, *" class="mainMenuItems">
<Label class="fa mainMenuItemIcon" col="0" text="{{ icon | fonticon }}" horizontalAlignment="center" verticalAlignment="middle" />
<Label class="mainMenuItemLabel" col="1" text="{{ title }}" horizontalAlignment="left" verticalAlignment="middle" />
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</GridLayout>
</drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer>
</dpg:DrawerPage.sideDrawer>
<!-- << sidedrawer-over-navigation-drawer -->
In the image you will see what is going on.
Any idea what is going on?
Thanks!!!
Always use <Label textWrap="true" to make those babies fit.
Try setting those labels to a width of a 100% or some width long enough to fit all your text. that will fix them truncating
There is no verticalAlignment="middle". Its top, center, bottom or stretch. This may affect your labels.
Also try removing the root GridLayout columns="300".
Your alignment at the main menu is redundant, try to use vertical alignment instead and customize the size of columns of the GridLayout. Example:
<GridLayout rows="50" columns="50, *" class="mainMenuItems">
set columns="(set column size) , (set column size) ".