I am trying to learn NativeScript. In the process, I thought I would create some common screens. The first being a Login screen. In that effort, I created the following xml.
Login.xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<GridLayout columns="*, *", rows="80, 80, 80, 80, auto">
<Label text="Username" row="0" col="0" />
<TextField row="1" col="0" />
<Label text="Password" row="2" col="0" />
<TextField row="3" col="0" />
</GridLayout>
</Page>
When I run this app, all 4 controls (Label, TextField, Label, TextField) are sitting on top of one another halfway down the screen. I don't understand why. I'm just trying to use a basic GridLayout.
On the second line, you've a faulty comma between the columns and rows declarations. In XML, properties are separated with whitespace.
<GridLayout columns="*, *", rows="80, 80, 80, 80, auto">
should be
<GridLayout columns="*, *" rows="80, 80, 80, 80, auto">
Despite the extra comma there, you also could remove the columns property as you are setting all as col=0 it will be by default set as 0
Related
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"
I have a gridLayout with three columns, how to set fixed width for middle column in percentage and others with auto width?
I tried this:
<GridLayout class="profiles" rows="auto, auto, auto" columns="*, 90%, *">
</GridLayout>
You can set fixed width for first column and for the second column, you can set 9 times to the third one.
<GridLayout columns="60, 9*, *" rows="*, *" height="230"
backgroundColor="lightgray">
<Label text="Label 1" row="0" col="0" backgroundColor="red"></Label>
<Label text="Label 2" row="0" col="1" backgroundColor="green"></Label>
<Label text="Label 3" row="0" col="2" backgroundColor="blue"></Label>
<Label text="Label 4" row="1" col="0" backgroundColor="yellow"></Label>
<Label text="Label 5" row="1" col="1" backgroundColor="orange"></Label>
<Label text="Label 6" row="1" col="2" backgroundColor="pink"></Label>
</GridLayout>
I have created a playground for you here.
I'm new to NativeScript. I cannot get a simple table layout to look good through the gridlayout container. Here's my markup
<GridLayout columns="*, 100, 100" rows="auto">
<Label text="ΕΣΟΔΑ" row="0" col="0" colSpan="3" fontSize="20" class="font-weight-bold"></Label>
<Label text="Έσοδα Παροχής Υπηρεσιών" row="1" col="0" fontSize="20"></Label>
<TextField
row="1" col="1"
keyboardType="number"
returnKeyType="done"
class="input input-border"></TextField>
<Label text="50%" textAlignment="right" row="1" col="2" backgroundColor="green" fontSize="20" verticalAlignment="middle"></Label>
</GridLayout>
and this is the output
I want the first label to span the entire first row. I tried changing the col values or removing col, nothing worked.
You have one 1 row, you need 2 or more
<GridLayout columns="*, 100, 100" rows="auto,auto">
That should sort your views
We use NativeScript 2.3 with Angular2 final.
We have an issue with the ListView component. We can bind something to the view but it always display this:
Here's the code of the template:
`
<GridLayout row="0" columns="*, auto" class="add-bar">
<!--<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" col="0"></TextField>-->
<!--<Image src="res://add" (tap)="add()" col="1"></Image>-->
</GridLayout>
<ListView [items]="orderForms" row="1" class="small-spacing" [class.visible]="listLoaded">
<template let-item="item">
<GridLayout columns="*, auto">
<Label col="0" [text]="item.frameworkContractNumber" class="medium-spacing"></Label>
<Label col="1" [text]="item.requestIdentifier" class="medium-spacing"></Label>
</GridLayout>
</template>
</ListView>
With the previous RC of angular it was working. Now whatever we try(array, observables, ...) we end up with this. It's the same on Android and IOS.
Any ideas?
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) ".