Keep ActionBar always on top


#1

I’m using this layout to draw a Mapbox:

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:map="nativescript-mapbox" loaded="pageLoaded">
<Page.actionBar>
  <ActionBar.actionItems>
<ActionBar title="test" loaded="actionbarLoaded">
 <StackLayout cssClass="action-bar" orientation="horizontal"
      ios:horizontalAlignment="center"
      android:horizontalAlignment="center">
      <Label text="test"></Label>
 </StackLayout>
  <android>
    <NavigationButton icon="res://ic_menu" tap="showSlideout" />
  </android>
  <ios>
    <ActionItem icon="res://ic_menu" ios.position="left" tap="showSideDrawer" />
  </ios>
    </ActionBar.actionItems>
  </ActionBar>
</Page.actionBar>
<StackLayout cssClass="mapboxContainer" orientation="horizontal">
 <map:MapboxView  mapReady="onMapReady">
</map:MapboxView>
</StackLayout>
</Page>

But after the mapbox is rendered the ActionBar is overlapped by the map.
I whould like to know if it possible to set to zero the map margins and keep the ActionBar on top.
Any idea how to fix this issue?


#2

What is you remove the content of Page.actionBar and put something simple there lile ?


#3

For simplicity I just copied and pasted the example in the ActionBar documentation, but still when loaded the map completly overlap the ActionBar.

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <Page.actionBar>
      <ActionBar title="My ActionBar"/>
  </Page.actionBar>

  <!-- page content ... -->
</Page>