Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic v4: Tabs - tabbbarPlacement="top" renders tabs above the page header

See original GitHub issue

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.8
   @angular-devkit/schematics : 0.6.8
   @angular/cli               : 6.0.8
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.1
   npm    : 6.1.0
   OS     : macOS High Sierra

Describe the Bug When using <ion-tabs tabbarPlacement="top">, the tabs are rendered above the page header and toolbar:

Steps to Reproduce Steps to reproduce the behavior:

Create a @ionic/angular@4.0.0-alpha.7 project with the CLI, select the tabs starter: ionic start tabs-placement tabs --type angular
Open src/app/pages/tabs/tabs.page.html
Add tabbarPlacement="top" to the <ion-tabs>
Run in the browser with npm run start

Related Code

<ion-tabs tabbarPlacement="top">
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Expected Behavior Tabs should be placed at the top of the screen, below the pages <ion-header>.

Additional Context List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

Issue Analytics

State:
Created 5 years ago
Reactions:10
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

FdezRomerocommented, Nov 15, 2018

Thanks @brandyscarney!

Makes sense not to support it anymore if it’s not natively supported on iOS and Android.

But since it was supported in Ionic 3 (I used it in the Savelist PWA on desktop) it would nice to have it documented in the breaking changes.

Best, Rodrigo

1reaction

jtorfs01commented, Aug 12, 2018

Hi, im having the same issue in Ionic v4 beta 2. Did you find a solution for this?

Top Results From Across the Web

Ion-Tabs: Tab-Based Component for App Top-Level Navigation

Tabs are top-level components to implement tab-based navigation. Ion-tabs have no styling & work as router outlets for navigation that behaves like native ......

Ionic Tabs - header root pages above tabs - Stack Overflow

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

How to Combine Ionic 4 Tabs and Side Menu Navigation

In this tutorial we combine the tabs and side menu pattern into one Ionic 4 app! Learn to build mobile apps with Ionic...

How To Create a Tab Header - W3Schools

Learn how to create tab headers with CSS and JavaScript. Tab Headers. Click on the "city" buttons to display the appropriate header: ...

Understanding Tabs In Ionic Framework

Let's begin digging into the tabs starter project. The project is made up of the main index.html page, a tabs.html template which serves...