Environment
- CLI: 5.0.3
- Cross-platform modules: 5.1.0
- Android Runtime: 5.1.0
- iOS Runtime: 5.1.0
- Plugin(s):
│ nativescript-angular │ ~7.0.0 │
│ nativescript-localstorage │ ^2.0.0 │
│ nativescript-theme-core │ ~1.0.4 │
│ nativescript-ui-listview │ ^5.0.1 │
│ nativescript-ui-sidedrawer │ ^5.1.0 │
│ nativescript-websockets │ ^1.5.3 │
Describe the bug
On iPhone 6 simulator there is a space between any layout and the ActionBar, when the layout is inside a TabView. The space is part of the TabView itself, because changing its background color changes the color of the space. This does not affect any android devices. Possibly related to #3865?
Here is also a picture:
To Reproduce
Please see the example down below.
Expected behavior
There should be no space between the ActionBar and the TabView content.
Sample project
tab.component.tns.html
<TabView #TabView [selectedIndex]="tabSelectedIndex" (selectedIndexChanged)="onSelectedIndexChanged($event)" androidTabsPosition="bottom">
<StackLayout class="test" *tabItem="{title: 'Dashboard'}">
<GridLayout>
<Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
</GridLayout>
</StackLayout>
<StackLayout class="test" *tabItem="{title: 'Rooms'}">
<StackLayout>
<Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
</StackLayout>
</StackLayout>
<StackLayout class="test" *tabItem="{title: 'Actions'}">
<GridLayout>
<Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
</GridLayout>
</StackLayout>
<StackLayout class="test" *tabItem="{title: 'Rules'}">
<StackLayout>
<Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
</StackLayout>
</StackLayout>
</TabView>
tab.component.tns.css
/* Add mobile styles for the component here. */
TabView {
font-size:14;
background-color: red;
tab-background-color: #30bcff;
selected-tab-text-color: rgb(255, 255, 255);
android-selected-tab-highlight-color: rgb(255, 255, 255);
tab-text-color: rgb(50, 50, 50);
}
.test {
background-color: white;
}
main.component.ios.html
<ActionBar flat="true" title="test" class="bg-primary">
<ActionItem ios.position="left">
<Label (tap)="toggleDrawer()" class="materialIcon" fontSize="24" text=""></Label>
</ActionItem>
</ActionBar>
<app-tab></app-tab>
Reactions are currently unavailable
Environment
│ nativescript-angular │ ~7.0.0 │
│ nativescript-localstorage │ ^2.0.0 │
│ nativescript-theme-core │ ~1.0.4 │
│ nativescript-ui-listview │ ^5.0.1 │
│ nativescript-ui-sidedrawer │ ^5.1.0 │
│ nativescript-websockets │ ^1.5.3 │
Describe the bug
On iPhone 6 simulator there is a space between any layout and the ActionBar, when the layout is inside a TabView. The space is part of the TabView itself, because changing its background color changes the color of the space. This does not affect any android devices. Possibly related to #3865?
Here is also a picture:
To Reproduce
Please see the example down below.
Expected behavior
There should be no space between the ActionBar and the TabView content.
Sample project
tab.component.tns.html
<TabView #TabView [selectedIndex]="tabSelectedIndex" (selectedIndexChanged)="onSelectedIndexChanged($event)" androidTabsPosition="bottom"> <StackLayout class="test" *tabItem="{title: 'Dashboard'}"> <GridLayout> <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button> </GridLayout> </StackLayout> <StackLayout class="test" *tabItem="{title: 'Rooms'}"> <StackLayout> <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button> </StackLayout> </StackLayout> <StackLayout class="test" *tabItem="{title: 'Actions'}"> <GridLayout> <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button> </GridLayout> </StackLayout> <StackLayout class="test" *tabItem="{title: 'Rules'}"> <StackLayout> <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button> </StackLayout> </StackLayout> </TabView>tab.component.tns.css
/* Add mobile styles for the component here. */ TabView { font-size:14; background-color: red; tab-background-color: #30bcff; selected-tab-text-color: rgb(255, 255, 255); android-selected-tab-highlight-color: rgb(255, 255, 255); tab-text-color: rgb(50, 50, 50); } .test { background-color: white; }main.component.ios.html
<ActionBar flat="true" title="test" class="bg-primary"> <ActionItem ios.position="left"> <Label (tap)="toggleDrawer()" class="materialIcon" fontSize="24" text=""></Label> </ActionItem> </ActionBar> <app-tab></app-tab>