Consider the next xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
<!-- UI Decalration -->
<AbsoluteLayout>
<GridLayout zIndex="99" height="100" width="100" backgroundColor="red"></GridLayout>
<GridLayout zIndex="1" height="200" width="200" backgroundColor="green"></GridLayout>
</AbsoluteLayout>
</Page>
In my understanding the red square should be visible, but it's hidden behind the green one. Am I doing something wrong?
Declare z-index as CSS property so all elements should be rendered as espected.
For example :
page.css
.lower-grid {
z-index: 1;
}
.upper-grid {
z-index: 99;
}
page.xml
<AbsoluteLayout>
<GridLayout class="upper-grid" height="100" width="100" backgroundColor="red" />
<GridLayout class="lower-grid" height="200" width="200" backgroundColor="green" />
</AbsoluteLayout>
This solution worked out for me - keep in mind that z-index is supported for Android API 21 and above.
I got it working by using gridlayout and then repeating the same row number. The order of the items then determines the z-index playground demo:
<GridLayout rows="*, *, *" columns="*">
<GridLayout row="0" col="0" height="300" backgroundColor="black" />
<GridLayout row="1" col="0" height="300" backgroundColor="red" />
<GridLayout row="2" col="0" height="300" backgroundColor="green" />
<GridLayout row="0" col="0" height="100" backgroundColor="blue" margin="100" /> <!-- displays on top of the first row 0 -->
</GridLayout>
Related
I tried to add two colors with full width in nativescript android. But it always takes extra padding. Below is my code-
<ActionBar class="p-l-0 m-l-0" backgroundColor="#007FA3">
<GridLayout rows="auto,auto" columns="*">
<StackLayout class="p-2" row="0" style="background-color: #F29F03;" horizontalAlignment="left">
<Label class="action-label p-2" width="200%" text=" Please wait" fontSize="12" color="white" horizontalAlignment="center" verticalAlignment="center"></Label>
</StackLayout>
<StackLayout orientation="horizontal" row="1">
<label textAlignment="center" text=" " class="fas" row="1" color="white"></label>
<Label text="PageTitle" fontSize="22" color="white" horizontalAlignment="center" verticalAlignment="center"></Label>
</StackLayout>
</GridLayout>
</ActionBar>
How to remove the extra margin before orange label?
If you're using a later version of Theme then you may need to increase the css specificity, such as:
.ns-root ActionBar.actionbar {
margin: 0;
padding: 0;
}
And in your xml file,
<ActionBar class="actionbar" backgroundColor="#007FA3">
...
I have in my main App.vue a component, called BottomNavigationBar that is always on screen. Above that, I have a separate Frame that loads up CountryListComponent, which navigates to different parts of that component. The only issue is that some of the content being loaded in the separate Frame is being hidden behind the persistent BottomNavigationBar. I assume I have to adjust the height of the new Frame to lower the height to account for the BottomNavigationBar. I added an #loaded event that called adjustFrameHeight to the Frame but not sure what to run inside of it to adjust the height. What's the best way to do this?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
<Frame #loaded="adjustFrameHeight" id="main-frame" height="90%" v-show="this.selectedTab =='1'">
<CountryListComponent dock="top" #handleItemTap="handleItemTap" :movies="this.movies"/>
</Frame>
<BottomNavigationBar
dock="bottom"
activeColor="red"
inactiveColor="yellow"
backgroundColor="blue"
#tabSelected="this.changeTab"
verticalAlignment="bottom"
row="1">
<BottomNavigationTab title="First" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
You can try to use a GridLayout instead of the DockLayout.
* will take up the available space on the screen and auto will take up the maximum height of the child component in that row.
<template>
<Page actionBarHidden="true">
<GridLayout rows="*, auto" height="100%">
<Frame row="0" #loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
<CountryListComponent #handleItemTap="handleItemTap" :movies="this.movies"/>
</Frame>
<BottomNavigationBar
row="1"
activeColor="red"
inactiveColor="yellow"
backgroundColor="blue"
#tabSelected="this.changeTab"
verticalAlignment="bottom">
<BottomNavigationTab title="First" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</GridLayout>
</Page>
</template>
So, it seems like Frame takes 100% of the height of its direct parent.
Just add StackLayout as the parent of the frame
<Page actionBarHidden="true">
<GridLayout rows="*, auto" height="100%">
<StackLayout>
<Frame row="0" #loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
<CountryListComponent #handleItemTap="handleItemTap" :movies="this.movies"/>
</Frame>
</StackLayout>
<BottomNavigationBar
row="1"
activeColor="red"
inactiveColor="yellow"
backgroundColor="blue"
#tabSelected="this.changeTab"
verticalAlignment="bottom">
<BottomNavigationTab title="First" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</GridLayout>
</Page>
</template>
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
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've got a TextView inside a GridLayout and have it set to take maximum available height. That works.
But If the user presses new-line to the bottom of the TextView and more - the TextView cursor goes off the bottom of the screen instead of scrolling the TextView.
How can I get the TextView to scroll.
In iOS the TextView should be scrollable by default if you set large text in it.
However for Android you could use ScrollView and to use StackLayout for main container inside it. For further help you could review the below attached example:
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<GridLayout columns="*" rows="auto,*">
<GridLayout row="0" col="0" columns="auto,*" rows="auto">
<Label text="header" row="0" col="0" />
</GridLayout>
<GridLayout row="1" col="0" columns="auto,*" rows="auto">
<Label text="Note" row="0" col="0" />
<ScrollView orientation="vertical" row="1" col="0" height="300" width="300" backgroundColor="green">
<StackLayout orientation="vertical" class="scroll-menu" backgroundColor="red">
<TextView text="" hint="Enter text..." />
</StackLayout>
</ScrollView>
</GridLayout>
</GridLayout>
</Page>