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 - tabbarLayout options are not shown as expected

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 tabbarLayout="icon-start">, the tab button icons are still shown on top of the labels:

icon-start:

Other options like icon-end, icon-bottom, icon-hide and title-hide also have layout problems.

title-hide:

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-layout tabs --type angular
Open src/app/pages/tabs/tabs.page.html
Add tabbarLayout="icon-start" to the <ion-tabs>
Run in the browser with npm run start

Related Code

<ion-tabs tabbarLayout="icon-start">
  <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 Tab button icons should be placed at the side of their labels. Other layout options should be positioned correctly.

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:1
Comments:6 (5 by maintainers)

Top GitHub Comments

3reactions

brandyscarneycommented, Aug 10, 2018

This has been fixed and will be in the beta.3 release, thanks!

0reactions

brandyscarneycommented, Aug 9, 2018

@Mobiletainment I haven’t gotten back to finishing it yet. I submitted a PR for it so you can see where it’s at: https://github.com/ionic-team/ionic/pull/15113

I have fixed the layout itself but there are still some issues with padding and margin between elements.

Top Results From Across the Web

Ionic v4: Tabs - tabbarLayout options are not shown ... - GitHub

Bug Report Ionic Info Run ionic info from a terminal/cmd prompt ... Ionic v4: Tabs - tabbarLayout options are not shown as expected...

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 4 Tabs panel not showing on all pages - Stack Overflow

I'm developing an app using Ionic 4 and there is a Tab Panel in the bottom of the page. the thing is that...

Tabs – Material Design 3

Tabs organize content across different screens, data sets, ... Tabs are displayed next to each other as peers, in categories of equal importance....

Building with Stencil: Tabs - Ionic Blog

I display the tab buttons as button elements inside of a div container element. Since the tabs represent a list of options, the...