Ionic Tabs - header root pages above tabs

Question

i've the the following problem with the header (toolbar) position in the roots pages:

Why the headers root pages are located above the tabs ? i need to put them within childs page.

the code is so simply:

 tabs.html

<ion-tabs tabsPlacement="top" tabsLayout="icon-bottom" tabsHighlight=true>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"> 
 </ion-tab>
 <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>


tab1Root (home.html)

<ion-header>
<ion-toolbar>
   <div >
      <small> 
        this is the toolbar ...
      </small>
    </div>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding>
  <h2>Welcome to Ionic!</h2>
 <p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
 Take a look at the <code>src/pages/</code> directory to add or change tabs,
 update any existing page or create new pages.
  </p>
 </ion-content>

thanks.

Simon L. Brazell Simon L. Brazell · Accepted Answer · 2018-07-03T11:52:42

Because you have placed the <ion-toolbar> within an <ion-header> which will position it at the top (header) of the screen. Please see the Ionic Toolbar docs.

Try placing it within <ion-content> instead.

<ion-content>

  <ion-toolbar>
    <ion-title>this is the toolbar ...</ion-title>
  </ion-toolbar>

</ion-content>

Ionic Tabs - header root pages above tabs

1 Answers