I have AbsoluteLayout in ScrollView with pager and custom components inside Pager. The code is working on Android, but on iOS is nothing shown. Does anyone have some solution?
<ScrollView>
<AbsoluteLayout>
<Pager row="1" #pager [selectedIndex]="currentPagerIndex" width="100%">
<ns-dashboard-profile height="100" *pagerItem></ns-dashboard-profile>
<ns-dashboard-home *pagerItem></ns-dashboard-home>
<ns-dashboard-devices *pagerItem></ns-dashboard-devices>
</Pager>
<FlexboxLayout class="navigation-wrapper" top="230">
<Label text="Profil" (tap)="goToPage('profile')" class="profile-tab"></Label>
<Label text="Početna" (tap)="goToPage('home')" class="home-tab"></Label>
<Label text="Moji uređaji" (tap)="goToPage('devices')" class="my-device-tab"></Label>
</FlexboxLayout>
</AbsoluteLayout>
ScrollView closing tag is not shown in the code snippet.
Related
I'm trying to create a layout that has a button row at the top and then a scrollView beneath that:
<GridLayout columns="*,40,10" rows="10,40,*">
<Label row="1" col="1" text="X" tap="close" />
<ScrollView orientation="vertical" col="0" row="2" colSpan="3">
…
</ScrollView>
</GridLayout>
This works on Android, I get a ScrollView that's 50 from the top and the Label with the «X» in it on top.
On iOS, the ScrollView always is at the top of the view, overlapping the «X»-Label.
Any ideas what I'm doing wrong?
NS 8.x
I suspect the issue is that you have two rows but reference them as 1 and 2 rather than 0 and 1.
Nativescript docs say androidElevation is a valid property for the stacklayout, but is not displayed when added in my ng project. The same elevation applied to a label works fine. Is there some additional property that needs to be added?
<StackLayout margin="10" androidElevation="12">
<Label text="sample1"></Label>
<Label text="sample2"></Label>
</StackLayout>
androidElevation works only when you set a background color on the view.
<StackLayout margin="10" androidElevation="12" style="background-color: red;">
<Label text="sample1"></Label>
<Label text="sample2"></Label>
</StackLayout>
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>
I'm creating a custom action bar and my idea is that the actionbar must be transparent (thats why I can't/don't want to use the native one) and behind the action bar there must be content (an image in this case).
I tried multiple ways and all of them with the same result, the iOS button become unclickable for no reason.
Ok, so I have an AbsoluteLayout inside I have GridLayout fixed on top as the custom actionbar and then a ScrollView with 100% width and height, inside the scrollview there's some content. The problem is as soon as I put a button inside the GridLayout this become unclickable only on iOS because in Android works just fine.
Let me show you my example with some code:
<Page actionBarHidden="true">
<AbsoluteLayout>
<GridLayout rows="50, *" backgroundColor="red" top="0" left="0" height="50" id="bar">
<Button text="click" #tap="goToDetailPage" id="buttondelsous"></Button>
</GridLayout>
<ScrollView backgroundColor="blue" width="100%" height="100%" top="0" id="content">
<WrapLayout>
<StackLayout>
<Label text="this is behind"></Label>
</StackLayout>
</WrapLayout>
</ScrollView>
</AbsoluteLayout>
</Page>
As for the styles forcing the custom actionbar being in front of the scrollview I have:
#bar {
z-index: 5;
width: 100%;
}
#content {
z-index: 2;
}
This looks like this on Android:
Same way on iOS but the button "Click" is not working, like if it was behind something..
Any idea on how to fix this or any other approach to get what I need? Remember behind the action I must be able to place content (like a background image that I don't want to place in the Page tag itself but in another layout)
Thanks!
A wise man once told me that Nativescript stacks elements in the order you list them. Try flipping around the order so the button is listed last in the template. I believe you won't even need the z-index line if you flip the order around.
should look like
<Page actionBarHidden="true">
<AbsoluteLayout>
<ScrollView backgroundColor="blue" width="100%" height="100%" top="0" id="content">
<WrapLayout>
<StackLayout>
<Label text="this is behind"></Label>
</StackLayout>
</WrapLayout>
</ScrollView>
<!-- I'm listed second so I will be on top even though I have row="0" -->
<GridLayout rows="50, *" backgroundColor="red" top="0" left="0" height="50" id="bar">
<Button text="click" #tap="goToDetailPage" id="buttondelsous"/>
</GridLayout>
</AbsoluteLayout>
</Page>
In my HTML file I have this markup: While the ActionBar shows the title , the tabviews in the stacklayout are not visible at all and I get no errors, but I do not understand why??? I am new to nativescript... ;-)
Anyone can see what I do wrong?
<ActionBar title="Working days planner" class="action-bar">
</ActionBar>
<StackLayout class="page">
<TabView id="tabViewContainer">
<TabViewItem title="First Tab">
<StackLayout>
<Label text="Working days" class="action-label m-15"></Label>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Second Tab">
<StackLayout>
<Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
</StackLayout>
</TabViewItem>
</TabView>
</StackLayout>
The StackLayout code in the first TabViewItem does work when its put under the ActionBar, but the TabView component somehow screws everything.
I haven't seen that syntax with the TabViewItem element. Try starting from a simpler example from the documentation page:
NativeScript TabView for Angular
Once you get a basic example working take incremental steps to change the content over to yours. Also, this is a basic feature so you can set up a Playground example and share that if you have specific problems.
Try removing the StackLayout above, you really don't need it.