Skip to content

Space between ActionBar and any layout inside TabView #6788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
enwi opened this issue Jan 13, 2019 · 13 comments · Fixed by #6862
Closed

Space between ActionBar and any layout inside TabView #6788

enwi opened this issue Jan 13, 2019 · 13 comments · Fixed by #6862
Assignees
@MartoYankov
Labels
action-bar os: ios tab-view

Comments

@enwi
Copy link

enwi commented Jan 13, 2019

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:
simulator screen shot - iphone 6 - 2019-01-13 at 14 40 32

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="&#xe5d2;"></Label>
  </ActionItem>
</ActionBar>
<app-tab></app-tab>
@NickIliev
Copy link
Contributor

NickIliev commented Jan 14, 2019 •
edited
Loading

@enwi apart from the emulator device version can you tell us on which is the used iOS version?
Llet me know if the issue is present when the flat property is set to false.

@enwi
Copy link
Author

enwi commented Jan 14, 2019 •
edited
Loading

@NickIliev The iOS version of the emulator is 12.1 (16B91). When I set the flat property to false the issue is not present.

@NickIliev NickIliev added the bug label Jan 15, 2019
@erjdriver erjdriver mentioned this issue Jan 26, 2019
Open
@btaluy
Copy link

btaluy commented Jan 28, 2019

This issue still exists on IOS with flat set to true, problem disappears when set to false.
This is a major issue for us since we cant upgrade to 5.x now.

@wvegteren
Copy link

This blocks upgrading to 5.x for us as well. We use a flat ActionBar in combination with tabbed navigation and this issue breaks our layout.

@doktr
Copy link

doktr commented Jan 28, 2019

Same problem applies to real devices - running iOS 12.1 on iPhone SE.
Reproduced on playground https://play.nativescript.org/?template=play-ng&id=h72cGK&v=2

@MartoYankov MartoYankov self-assigned this Feb 4, 2019
@MartoYankov MartoYankov mentioned this issue Feb 5, 2019
Merged
@ghost ghost added the in progress label Feb 5, 2019
@victorevox
Copy link

Having same issue, also this is happening when having any layout inside UI Sidrawer and with a flat actionbar , you can see: #5855 (comment)

@MartoYankov
Copy link
Contributor

@victorevox I will need some more information on this.

Do you mean having any layout inside the main or the drawer content of the side drawer?
Is the flat action bar on top of the side drawer or in a page that is loaded in the main content of the side drawer?

In general, if you could provide some playground or sample it would be great.

@mfik
Copy link

mfik commented Feb 6, 2019

https://play.nativescript.org/?template=play-ng&id=sywM8A Here you go. Same problem here and on playground. Just switch flat: false for dissapearance of the spacing.

@ghost ghost removed bug in progress labels Feb 6, 2019
@MartoYankov
Copy link
Contributor

@mfik I'm aware of this problem with the TabView nested flat action bar. It should be fixed with the PR above. I was asking @victorevox for an example with the drawer that he mentioned, because I can't reproduce it. I'm also asking, so that I can add tests for it.

@victorevox
Copy link

Hi @MartoYankov , here I've replicated the issue https://play.nativescript.org/?template=play-ng&id=ZyeGeF&v=3 , hope it got fixed too! :)

@blizmo
Copy link

blizmo commented Feb 12, 2019

Same issue happens to tab bar when setting translucent to false

https://play.nativescript.org/?template=play-ng&id=ZyeGeF&v=4

const tabView = this.tabViewRef.nativeElement as TabView;
tabView.ios.tabBar.translucent = false;
tabView.ios.tabBar.clipsToBounds = true; // Remove the top border from TabBar

@MartoYankov MartoYankov mentioned this issue Feb 12, 2019
Closed
@MartoYankov
Copy link
Contributor

@victorevox This issue is fixed with #6862 as well. It will be available in the 5.2 release.

@blizmo Thanks for reporting this. I logged this as a separate issue here - #6891.

@lock
Copy link

lock bot commented Feb 12, 2020

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked and limited conversation to collaborators Feb 12, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@MartoYankov MartoYankov

Labels
action-bar os: ios tab-view
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(action-bar): flat mode breaks ios safe area NativeScript/NativeScript
9 participants
@blizmo @wvegteren @MartoYankov @doktr @mfik @victorevox @NickIliev @btaluy @enwi