Faced an unpleasant problem
help me please
When trying to align to the bottom of the page, the IOS unit does not completely go down
iosOverflowSafeArea did not help
<GridLayout columns="*,*" rows="*" row="1" col="0" class="project-type-content" width="100%" [iosOverflowSafeArea]="true">
<StackLayout width="100%" row="0" [col]="i" *ngFor="let item of projectTypes; let i=index" class="debug" verticalalignment="bottom" [iosOverflowSafeArea]="true">
<StackLayout width="75%" (tap)="onProjectTypeChoose(item.urlPrefix)" class="debug" [iosOverflowSafeArea]="true">
<GridLayout columns="*" rows="auto, auto" height="auto">
<StackLayout class="btn-type-choose" col="0" row="0">
<ns-rounded-button fontColor="#fff" borderColor="#fff" color="#fff" [text]="item.title" [bg]="item.bg"
width="100%"></ns-rounded-button>
</StackLayout>
<StackLayout width="100%" col="0" row="1" class="project-type-item">
<Label [text]="item.subTitle" width="100%" class="project-type-item-title monserrat regular"></Label>
<!--<Image [src]="item.image" stretch="aspectFill" class="project-type-item-image"></Image>-->
<HtmlView [html]="item.description" width="100%"></HtmlView>
<Image src="~/assets/images/firstScreenShadow.png" width="100%" horizontalAlignment="center"></Image>
<Label text="What`s New:" class="whats-new-title monserrat semi-bold"></Label>
<Label *ngIf="item.updateText && item.updateText[0]" [text]="item.updateText[0]" class="project-type-item-wats monserrat regular"></Label>
<Label *ngIf="item.updateText && item.updateText[1]" [text]="item.updateText[1]" class="project-type-item-wats monserrat regular"></Label>
<StackLayout width="100%" class="tap-to-choose" height="20">
<Button text="Tap to choose" class="tap-to-choose-btn" width="60%"></Button>
</StackLayout>
</StackLayout>
</GridLayout>
</StackLayout>
</StackLayout>
</GridLayout>
http://prntscr.com/mww4y3
Related
Tell us about the problem
I am trying to horizontally set the content that is grouped with the function of but is not possible, because all content is horizontal.
Which platform(s) does your issue occur on?
Both
Please tell us how to recreate the issue in as much detail as possible.
<RadListView
[items]="dataItems"
#productsListView
[groupingFunction]="grouping"
>
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal" width="100%">
<MDCardView width="100" height="100">
<Image stretch="aspectFill" [src]="item.image"></Image>
</MDCardView>
</StackLayout>
</ng-template>
<ng-template tkGroupTemplate let-category="category">
<GridLayout columns="*, auto" ios:height="50">
<Label
col="0"
style="font-weight: bold; font-size: 24"
[text]="category"
></Label>
<Label
col="1"
style="font-size: 12; color: gray;"
text="Ver más"
></Label>
</GridLayout>
</ng-template>
<ListViewGridLayout
tkListViewLayout
itemHeight="100"
scrollDirection="Horizontal"
></ListViewGridLayout>
</RadListView>
Try ScrollView within tkGroupTemplate
<ng-template tkGroupTemplate let-category="category">
<GridLayout>
<ScrollView orientation="horizontal" scrollBarIndicatorVisible="false">
<Label class="m-5 h2" [text]="category"></Label>
</ScrollView>
</GridLayout>
</ng-template>
Playground Sample
For displaying the grid view (4*4) in nativescript with Angular, I have integrated the npm "nativescript-grid-view" as per the example in npm site. But, It fails for me. I got the error whenever I enter that page in the application.
Error :
System.err: Error: Expecting a valid View instance.
System.err: File: "file:///data/data/com.domain.project/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js, line: 337, column: 12
Code .ts file
<GridLayout class="page">
<GridView [items]="order" colWidth="30%" rowHeight="100">
<ng-template let-item="item" let-odd="odd">
<StackLayout margin="10" [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
<Label verticalAlignment="center" [text]="item.productName" class="list-group-item-text" textWrap="true"></Label>
</StackLayout>
</ng-template>
</GridView>
</GridLayout>
module.ts
import { GridViewModule } from 'nativescript-grid-view/angular';
imports: [
NativeScriptModule,
NativeScriptHttpModule,
NativeScriptUIDataFormModule,
NativeScriptUIListViewModule,
GridViewModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),
...SHARED_MODULES
],....
Package.json
"tns-android": {
"version": "3.0.1"
},
"tns-ios": {
"version": "3.4.1"
}
.....
"typescript": "~2.2.0",....
Somebody has asked the question is below forum, but no one has replied.
https://discourse.nativescript.org/t/dynamic-gridlayout-from-array-angular/1675
Or you could use nativescript-ui-listview and its ListViewGridLayout with spanCount property. The official documentation for this functionality is here. Basically, you could do the following:
<RadListView [items]="dataItems">
<ng-template tkListItemTemplate let-item="item">
<!-- item template here -->
</ng-template>
<ListViewGridLayout tkListViewLayout spanCount="4" scrollDirection="Vertical" ios:itemHeight="200" ></ListViewGridLayout>
</RadListView>
NativeScript 4X4 GridLayout
I have written some code in the nativescript playground link.
**
https://play.nativescript.org/?template=play-ng&id=a8UEDd
**
<GridLayout rows="*,*,*,*" columns="*,*,*,*">
<Label text="1" row="0" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="2" row="0" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="3" row="0" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="4" row="0" col="3" borderColor="black" borderWidth="1"></Label>
<Label text="5" row="1" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="6" row="1" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="7" row="1" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="8" row="1" col="3" borderColor="black" borderWidth="1"></Label>
<Label text="9" row="2" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="10" row="2" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="11" row="2" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="12" row="2" col="3" borderColor="black" borderWidth="1"></Label>
<Label text="13" row="3" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="14" row="3" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="15" row="3" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="16" row="3" col="3" borderColor="black" borderWidth="1"></Label>
</GridLayout>
Preview of the 4x4 GridLayout will be like this
Below code does work without using nativeoscript-grid-view. I think that nativescript version is the problem.
<ScrollView class="plansScroll" #plansScroll orientation="vertical" horizontalAlignment="center" width="100%">
<WrapLayout orientation="horizontal" [id]="myIndex" (tap)="onPlanSectionTap($event)" class="plansScrollGrid m-5" #plansScrollGrid>
<StackLayout *ngFor='let item of order; let myIndex = index' width="25%">
<!-- <Image [src]="item.imagePath" width="80"></Image> -->
<Image width="80" [src]="'~/assets/img/bratShop-overlay.jpg'"></Image>
<Label [text]='item.productName' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
<Label [text]='item.orderNumber' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
<Label [text]='item.orderStatus' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
<Label [text]='item.orderDate' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
</StackLayout>
</WrapLayout>
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
After I try NativeScript tutorial "Grocery", I found out that its button quite hard to tap it's because tap area is too small, so I want to increase Image hight by update layout file to the following below. However, image not seem to be in the center (Image Below).
How can I achieve this in NativeScript ?
list.html
<ActionBar title="Groceries">
<ActionItem text="Share" (tap)="share()"
android.systemIcon="ic_menu_share_holo_dark"
ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
<GridLayout row="0" columns="*, auto" class="add-bar">
<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" col="0"></TextField>
<StackLayout class="delete-container" height="100%" (tap)="add()" col="1" >
<Image src="res://add" stretch="none" horizontalAlignment="center"></Image>
</StackLayout>
</GridLayout>
<ListView [items]="groceryList" row="1" class="small-spacing" [class.visible]="listLoaded">
<ng-template let-item="item">
<GridLayout columns="*, auto">
<Label col="0" [text]="item.name" class="medium-spacing"></Label>
<StackLayout col="1" class="delete-container" height="100%" (tap)="delete(item)">
<Image src="res://delete"></Image>
</StackLayout>
</GridLayout>
</ng-template>
</ListView>
<ActivityIndicator
[busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'"
row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
</GridLayout>
You should check out NS's FlexBox layout.
It is quite useful:
http://docs.nativescript.org/cookbook/ui/layouts/flexbox-layout
<StackLayout width="100%" *ngFor="let item of (videos$ | async)">
<CardView class="studentCard" margin="2" elevation="10" radius="1">
<GridLayout rows="auto, auto, auto" columns="auto, auto, *">
<Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image>
<Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label>
<Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label>
</GridLayout>
</CardView>
</StackLayout>
I tried to wrap it in ScrollView, didn't work.
I couldn't make (items$ | async) work with ListView either, seems ngFor can't work with ListView, we need ng-template for ListView.
I tried the following but only the first item is rendering
<ScrollView>
<ListView [items]="videos$ | async" class="list-group">
<ng-template let-item="item">
<GridLayout class="list-group-item">
<Image [src]="item.snippet.thumbnails.high.url"></Image>
<Label [text]="item.snippet.channelTitle" ></Label>
<Label [text]="item.snippet.title">></Label>
</GridLayout>
</ng-template>
</ListView>
</ScrollView>
Wraping the entire code first with StackLayout then with ScrollView worked
<ScrollView>
<StackLayout>
<StackLayout width="100%" *ngFor="let item of (videos$ | async)">
<CardView class="studentCard" margin="2" elevation="10" radius="1">
<GridLayout rows="auto, auto, auto" columns="auto, auto, *">
<Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image>
<Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label>
<Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label>
</GridLayout>
</CardView>
</StackLayout>
</StackLayout>
</ScrollView>