In a flexbox layout i want to have an image on the left and a center label title on the right :
<FlexboxLayout backgroundColor="#bada55" justifyContent="space-between" height="300" class="head">
<Image :src="posts.image_url" stretch="aspectFit" class="head_img"/>
<Label :text="posts.product_name" alignSelf="center" alignContent="center" class="title" textWrap="true"/>
</FlexboxLayout>
in my case the label text is going to the right but is not center, any idea on how to do that ?
You can add textAlignment="center" to the label.
<FlexboxLayout backgroundColor="#bada55" justifyContent="space-between" height="300" class="head">
<Image :src="posts.image_url" stretch="aspectFit" class="head_img"/>
<Label :text="posts.product_name" alignSelf="center" alignContent="center" textAlignment="center" class="title" textWrap="true"/>
</FlexboxLayout>
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 am trying to achieve the following:
I tried achieving this with a GridLayout and only get one of the following two things working:
The space between the Label and the StackLayout is filled (label is
stretched), but scrolling will not work when adding more labels into
the StackLayout
Scrolling will work when more labels are added into
the StackLayout, but when only one label is showed for example, the
label before the StackLayout will not stretch
Is there any way to achieve such a thing? GridLayout is not necessarily needed, but I tried several ways and could not find any way of doing this.
example code of (1)
<Page class="page dark">
<ScrollView backgroundColor="red">
<GridLayout rows="*, auto" height="100%" backgroundColor="blue">
<Label backgroundColor="green">Top Label</Label>
<StackLayout row="1" backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
example code of (2):
<Page class="page dark">
<ScrollView backgroundColor="red">
<GridLayout rows="*, auto" backgroundColor="blue">
<Label backgroundColor="green">Top Label</Label>
<StackLayout row="1" backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
I wanted to achieve this for months and I finally found a working solution, for iOS and Android.
The solution is to use FlexboxLayout instead of GridLayout. When placed in a ScrollView, FlexboxLayout will take the whole available height if it is not tall enough. If it is taller than the ScrollView, it will be scrollable.
Here is the solution for your example:
<Page class="page dark">
<ScrollView backgroundColor="red">
<FlexboxLayout
flexDirection="column"
justifyContent="space-between"
alignItems="stretch"
backgroundColor="blue"
>
<Label backgroundColor="green">Top Label</Label>
<StackLayout backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</FlexboxLayout>
</ScrollView>
</Page>
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
I'm trying to put a button at the bottom of a StackLayout and it's not working.
I don't know what I'm doing wrong!
Here's my template:
<Page actionBarHidden="true">
<GridLayout rows="*, *, *, *" columns="*">
<StackLayout horizontalAlignment="center"
verticalAlignment="center">
<Label text="My Account" id="login-label"/>
</StackLayout>
<CardView row="1" class="cardStyle" margin="10"
elevation="40"
radius="4"
verticalAlignment="center"
horizontalAlignment="center"
rowSpan="2"
id="login-box">
<StackLayout id="form-container">
<TextField hint="Login"/>
<TextField hint="Password"/>
<Label text="Forgot password?" horizontalAlignment="right"/>
<Button text="Button" #tap="loginButton()" verticalAlignment="bottom"/>
</StackLayout>
</CardView>
</GridLayout>
</Page>
Thank you!
StackLayout do not support that by its design. It is used to just stack the child elements one after another in given orientation, you can't have mixed output - few child elements at top and few at bottom or center.
Use Grid / Dock layout in order to dock an element at bottom.
I need something like this:
But this is what I have at the moment:
.rotate {
transform: rotate(-90deg);
font-size: 16px;
color: #FFFFFF;
}
This is my code:
<StackLayout backgroundColor="#3C414B" width="12%" height="100%" horizontalAlignment="center" verticalAlignment="center" (tap)="openDrawer('Right')">
<StackLayout class="rotate" orientation="horizontal">
<Label class="fa" style="margin-right: 10px" text=""></Label>
<Label width="100%" class="" text="New Category" textwrap="false"></Label>
</StackLayout>
</StackLayout>
You will have to set the height explicitly to the width of the element, transform doesn't take care of that by default.
Or you may even consider using an image, here is a related thread from Forums.
It looks like you rotate inner <StackLayout class="rotate" ...>, but it still get width limit of outer <StackLayout width="12%" ...>
Try so:
<StackLayout class="rotate" backgroundColor="#3C414B" width="100%" height="12%" horizontalAlignment="center" verticalAlignment="center">
<StackLayout orientation="horizontal">
<Label class="fa" style="margin-right: 10px" text=""></Label>
<Label text="New Category" textwrap="false" backgroundColor="yellow"></Label>
</StackLayout>
</StackLayout>
Or try to find solution with other layout type. For example, AbsoluteLayout