Tab bar rendering problem

ionic-v1
1

Hi,

I’m using the element with three tabs but there’s a strange lighter colored block on top of the left most tab. If I widen the screen, the underlying tab icon appears to the right but the colored block remains. It’s really weird and looks like some CSS rendering issue. I tried different tab styles, like tab-default, tab-calm, etc. But they all have this issue. See image below for an example of this issue.

Anyone have an idea what’s wrong?

Cheers

image

2

Actually this issue should not occur. There might be something which we will understand if we look at the code. Could you please share a codepen or plunker if possible? And also let me know is this issue happening in the real devices too?

3

Hi there,

Actually, I was just walking through chapter 5 of the Ionic in Action book. If you checkout the project

git clone https://github.com/ionic-in-action/chapter5
cd chapter5
git checkout -f step1

you should have the exact same setup as I have. Then insert the following code in your www/index.html:

<body ng-app="App">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-chevron-left"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

Then the following code in your www/js/app.js:

angular.module('App', ['ionic'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('tabs', {
        url: '/tabs',
        templateUrl: 'views/tabs/tabs.html'
      });
    $urlRouterProvider.otherwise('/tabs');
  })

And the following code in a file www/views/tabs/tabs.html:

<ion-tabs class="tabs-icon-top tabs-positive">
  <ion-tab title="Rates" icon-on="ion-social-bitcoin" icon-off="ion-social-bitcoin-outline">
  </ion-tab>
  <ion-tab title="History" icon-on="ion-ios-analytics" icon-off="ion-ios-analytics-outline">
  </ion-tab>
  <ion-tab title="Currencies" icon-on="ion-ios-cog" icon-off="ion-ios-cog-outline">
  </ion-tab>
</ion-tabs>

Finally, run ionic serve and you should get the tab rendering problem.

Hope this helps!

Ralph

4

You can try starting the app with tabs template. There you don’t get these issues for sure. I was been using that for few apps.

5

Ok, I’ll definitely try that!
Thanks