Ion-header overlapping top tabs

Ionic Framework ionic-v3
1

Hi, I´ve a custom component called searchtitle with this code: (ionic v3)

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title *ngIf="!searchBarOpened">mCard</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="searchBarOpened = true" *ngIf="!searchBarOpened">
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
    <ion-searchbar  *ngIf="searchBarOpened" showCancelButton="true" (ionCancel)="searchBarOpened=false" color="primary"></ion-searchbar>
  </ion-navbar>
</ion-header>

The component works and can be added and it is fully functional

Then I have a generated tab page ( ionic g tabs home )

home.html:

<searchtitle></searchtitle>
<ion-tabs tabsPlacement=top color="primary" tabsHighlight="true">
    <ion-tab [root]="tab1Root" tabTitle="TAB1"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="TAB2"></ion-tab>
</ion-tabs>

The problem that I´m facing is that the header is overlapping the tabs, so the tabs are placed behind the header.

Any suggestion?.

2

First, custom elements should always have a kebab-case name. like <search-title>.

Then, your search title component doesn’t have the same style than the ion-header component, so the logic appear now :slight_smile:
To resolve this, set the same CSS style the ion-header have will be enough if you are searching for a brief option.
Or you could properly set the styles you need by separate the 2 view parts in specials div (or even use ion-row)

I hope this will help you for the future :wink:

3

Thanks for the advice, I´ve changed the name to search-title

I´m trying to get your point, I have to create a new style for the element that has to behave exactly as the header?.

I want my component to have a ion-header inside with all its features, styles, etc and with this special trick that I´ve done to include a searchbar and hide it when it is not in use…

I don´t get why I have to create a new style for an element… that already exists and it is styled.