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
Related
I can't find a simple solution for defining 6 rows (or more) and 1 column in a GridLayout.
For 6 rows now i have to say :
<GridLayout rows="auto, auto, auto, auto, auto, auto" columns="*">
This is the correct output, but i want to extend my rows optional.
Is there a shorter way to define this, or for any more desired rows?
The documentation is very confusing for this problem (for me).
thx
<FlexboxLayout class="page">
<StackLayout class="form">
<!-- <Label class="header" text="new contact"></Label> -->
<GridLayout rows="auto, auto, auto, auto, auto, auto, auto" columns="*">
<StackLayout row="0" class="input-field">
<TextField
class="input"
hint="Name"
keyboardType="email"
autocorrect="false"
autocapitalizationType="none"
returnKeyType="next"
></TextField>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout row="1" class="input-field">
<TextField class="input" ref="FirstName" hint="FirstName" secure="false"></TextField>
<StackLayout class="hr-light"></StackLayout>
</StackLayout> ...
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.
Hello everyone I'm trying to make inner StackLayouts but the second one comes to top of first one so that I can't see the second StackLayout should I handle with css if it is how or is there an other way
Here is my code
<StackLayout orientation="horizontal">
<StackLayout width="500">
<GridLayout columns="50, *" rows="*" width="500" height="50"
verticalAlignment="top">
<Label text="Name" row="0" col="0" backgroundColor="red">
</Label>
<Label text="Fol" row="0" col="1" class="alignRight"
backgroundColor="blue"></Label>
</GridLayout>
</StackLayout>
<StackLayout orientation="horizontal" width="500" height="180">
<Image src="http://lorempixel.com/400/200" width="500" left="10"
top="30">
</Image>
</StackLayout>
</StackLayout>
Thank you
At first I would delete the widths to see how the page is displayed. 500 is a very big value. Only large tablets can support that.
As an example at first I would try this :
<GridLayout columns="auto, auto">
<GridLayout col="0" columns="50, *" rows="*" verticalAlignment="top">
<Label text="Name" row="0" col="0" backgroundColor="red">
</Label>
<Label text="Fol" row="0" col="1" class="alignRight"
backgroundColor="blue"></Label>
</GridLayout>
<Image col="1" src="http://lorempixel.com/400/200" left="10" op="30">
</Image>
</GridLayout>
After you see the two parts align horizontally you can start tweaking the widths
I'm using the TKListViewHeaderDirective of teleriks RadListView in nativescript like so:
<GridLayout columns="*" rows="*" tkToggleNavButton>
<RadListView *ngIf="!loading" row="3" col="0" [items]="nodes" ...>
<ng-template tkListItemTemplate let-node="item">
<!-- list item -->
</ng-template>
<ng-template tkListViewHeader>
<GridLayout columns="*" rows="auto, auto, auto">
<GridLayout row="0" col="0" columns="40,*,40">
<Button class="fa action-item" row="0" col="0" [text]="'fa-sort-amount-asc' | fonticon" ios.position="right" android="actionBar" style="background-color:#c9c9ce;;"></Button>
<SearchBar row="0" col="1" #searchInput hint="Search" (submit)="search(searchInput.text)" (clear)="search('')" (textChange)="search(searchInput.text)"></SearchBar>
<Button class="fa action-item" row="0" col="2" [text]="'fa-th' | fonticon" ios.position="right" android="actionBar" style="background-color:#c9c9ce;"></Button>
</GridLayout>
<StackLayout row="1" col="0">
<Label text="Hello world"></Label>
<Label [text]="currentNode.name"></Label>
<Label [text]="nodes?.length ? nodes.length : 0"></Label>
</StackLayout>
<StackLayout row="2" col="0" *ngIf="!nodes?.length" class="list-group">
<!-- some contents -->
</StackLayout>
<StackLayout row="3" col="0" *ngIf="currentNode?.name !== '/'" class="list-group">
<!-- some contents -->
</StackLayout>
</GridLayout>
</ng-template>
</RadListView>
</GridLayout>
it seems like two things go wrong here:
this seems to be missing here (the *ngIf should show one of the StackLayouts in specific cases but does not
The GridLayout (does not have any effect if I change it to StackLayout) inside the list header shows only one child element
According to the docs: http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/header-footer
There is an issue on github concerning this: https://github.com/telerik/nativescript-ui-feedback/issues/207
I am trying to replicate a table using a ListView. Displaying the table's cell content works fine but when I add another GridLayout wrapped in a StackLayout above the Listview the Listview doesn't get displayed at all... Any idea why this might be happening? I tried as well to add the table headers to the ListView using nsTemplateKey but still get the same issue where the headers show but no table body content. When I remove the top GridLayout containing the headers the Listview's content displays perfectly as it should for some reason...
my code:
//headers
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
//listview containing the table body
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">
<ListView [items]="stockTakeDetailList">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
Try encapsulating all of the code within a StackLayout:
<StackLayout>
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">
<ListView [items]="stockTakeDetailList">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
</StackLayout>
Maybe try without the extra stack layouts:
<StackLayout>
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
<ListView [items]="stockTakeDetailList" *ngIf="stockTakeDetailList.length > 0 && !product">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>