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.
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'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
This works as expected (without <Repeater.itemsLayout> and wrapped by <StackLayout>):
<GridLayout columns="auto, *" rows="auto">
<Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
<StackLayout row="0" col="1" backgroundColor="green">
<Repeater items="{{ items }}">
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</GridLayout>
And this as NOT expected (with <Repeater.itemsLayout> and without wrapping by <StackLayout>):
<GridLayout columns="auto, *" rows="auto">
<Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
<Repeater items="{{ items }}">
<Repeater.itemsLayout>
<StackLayout row="0" col="1" backgroundColor="green"/>
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</GridLayout>
Following code works because you are wrapping your Repeater in StackLayout and assiging it row and column and that is required as well if your putting that inside a GridLayout.
<GridLayout columns="auto, *" rows="auto">
<Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
<StackLayout row="0" col="1" backgroundColor="green">
<Repeater items="{{ items }}">
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</GridLayout>
If you do not want to wrap inside a StackLayout, you should assign row="0" col="1" to Repeater.
Now comes to your question, that use of Repeater.itemsLayout, it gets or set the items layout of the Repeater. Default value is StackLayout with orientation="vertical".
So if you have a usecase where you want all the items in Repeater align horizontally, you should use following code.
<ScrollView row="0" col="0" orientation="horizontal">
<Repeater items="{{ items }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}" />
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
We can set row and col properties for Repeater tag. Like so:
<GridLayout columns="auto, *" rows="auto, *">
<Label text="Some Text" row="0" col="0"/>
<Repeater row="1" items="{{ items }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</GridLayout>
Answer can be found here: https://github.com/NativeScript/NativeScript/issues/6554#issuecomment-438167999
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 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>