Avoid to add margin-top inside my tab

Hi,

I have this:

tabs.html

<ion-header>
  <ion-navbar orange>
    <ion-title>
      My title
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="tab1"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="tab2"></ion-tab>
  </ion-tabs>
</ion-content>

tab1.html

<ion-content>
  <ion-list>
  ....
  </ion-list>
</ion-content>

Now, how can I avoid to add a “margin-top:40px” to my ion-content from details.html? My ion-list starts at the top of my screen so part of it is hidden by the navbar.

Thanks

So your markup is off.

If the page is only going to hold tabs, you can just do

   <ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="tab1"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="tab2"></ion-tab>
  </ion-tabs>
```
And remove the ion-header/ion-content.

Hi @mhartington,

I wish I could remove the header and content, but the tabs page is shown when clicking on an item from a list and I want to be able to go back to that list. The only way that I found is to use the navbar, add a content with the tabs.

If you think there is another way, please share it with me. :slight_smile:

Thanks in advance

We have had this discussion.
In the moment it seems that the tab control can only function as root page, not as nav page.
Perhaps you can use a segment as navigation instead of the tab.

The segment could be an alternative solution. Do you know if I can use text and icon like a tab?