Headers all messed up and tabs moved to top with new nightlies

1

The new nightlies (with Angular 1.3 and new Ionic release) have broken my headers and tabs in a pretty big way. See broken headers here:

The title should be centered, the tabs should be at the bottom, and as you can see the tabs icons disappear completely in the child view.

Sample header code in the browse view:

<ion-view title="LOVE.">
<ion-nav-buttons side="right">
    <button class="button no-animation button-icon icon ion-ios7-gear" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left;" ng-click="gotoSettings()">
</button>
<button class="button no-animation button-icon icon ion-ios7-paperplane" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" ng-click="sendFeedback()">
</button>

</ion-nav-buttons>

The tabs code:

    <ion-tabs tabs-type="tabs-icon-only" ng-class="navStyle.tabs">


  <ion-tab title="Search" icon-on="ion-ios7-search-strong" icon-off="ion-ios7-search" href="#/tab/search">
    <ion-nav-view name="search-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Tag" icon-on="ion-ios7-camera" icon-off="ion-ios7-camera-outline" href="#/tab/tag">
    <ion-nav-view name="tag-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Browse" icon-on="ion-ios7-keypad" icon-off="ion-ios7-keypad-outline" href="#/tab/browse">
    <!-- Tab 3 content -->
    <ion-nav-view name="browse-tab"></ion-nav-view>
  </ion-tab>


</ion-tabs>

I don’t see anything in the nightlies docs or the forum topic on the new nightlies that gives me any idea. Thoughts?

Thanks,
Marc

2 Likes
2

Another note:

I can see that a CSS class called tabs-top seems to be applied, I don’t know why. From the element viewer:

.tabs-top > .tabs, .tabs.tabs-top {
top: 44px;
padding-top: 0;
background-position: bottom;
}

(ionic.css 3605)

I am referencing the nightly CSS as well as the nightly Ionic Bundle. If I remove the top: 44px CSS, the tabs snap to the bottom, but the slide-box and view do not update properly… moreover, I don’t know how to prevent this CSS from being applied as I don’t see the class application anywhere.

Thanks,
Marc

3

Are you testing this on Android?

They have been purposefully adding in classes if you are on Android to give it a more Android-like feel.

Remember, you can always override the CSS.

1 Like
4

If you’re wondering what the navStyle.tabs class is, I’m using rootScope to change the styling of the tabs dependent on individual tab controllers:

var loveStyle = {
  navBar: 'bar-stable',
  tabs: 'tabs-background-stable'
};
var tagStyle = {
  navBar: 'bar-energized',
  tabs: 'tabs-background-stable'
};
5

Hey @marcsyp so the nightly builds are including a lot of changes that we are still activity updating.
A big change is how app look and transition on ios and android devices.
Each platform will follow the standard conventions (ios have centered titles and bottom tabs, android having left titles and tabs below the header-bar)

Take a read at his post

All of this is being made configurable as well, so if this isn’t something you would want, you can turn it off.

6

I did read the post but didn’t find any reference to tabs moving to under the header for Android… but more specifically, other than overriding the tabs-top class in CSS, I can’t see any way to customize the tabs. Is it possible through a directive? Can someone guide me through the proper way to override (without having to muck with multiple CSS classes)?

Thanks,
marc

7

@mhartington How do you go about turning off the standard conventions for each platform? I have looked here at the nightly docs for $ionicConfigProvider but can’t find this info. Basically I want each platform to behave the same as it does in beta 13 if that makes any sense.

Beta 14 has some great improvements, thank you. I have the issue mentioned here with tabs as well, I’d like to start using it but this is a major road block.

8

Alright, so lets remove all the platform changes so that way we have a consistent look between platforms.

myApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider
  .tabs.style("standard")
  .tabs.position("bottom")
  .views.transition("ios")
  .navBar.alignTitle("center")
  .navBar.positionPrimaryButtons('left')
  .navBar.positionSecondaryButtons('right')
});

The tabs configuration is in the ionicConfig docs.
http://ionicframework.com/docs/nightly/api/provider/%24ionicConfigProvider/

I’m working on adding the nav-bar configs to the docs so thats the only thing missing.
Adding these config options will make your app have the same appearance across platforms.

3 Likes
9

@mhartington Thank you! I’ll be testing out beta 14 today.

10

@mhartington

I tried the shorthand chaining way you mention above but it was throwing errors. I ended up having to use this approach -

$ionicConfigProvider.tabs.style('standard');
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.views.transition('ios');
$ionicConfigProvider.navBar.alignTitle('center');
$ionicConfigProvider.navBar.positionPrimaryButtons('left');
$ionicConfigProvider.navBar.positionSecondaryButtons('right');

I apologize for being annoying/needy I just want to try the new goodness and help :sunny:

/edit

I realize it can work like this -

$ionicConfigProvider.tabs
    .style('standard');
    .position('bottom');

$ionicConfigProvider.views.transition('ios');

$ionicConfigProvider
    .navBar.alignTitle('center');
    .navBar.positionPrimaryButtons('left');
    .navBar.positionSecondaryButtons('right');
11

Thank you @mhartington + @Ross, this is helpful to me as I will be making some of these changes myself tonight!

Cheers,
Marc

12

Hi @marcsyp, Though it has been too long since you got stuck on this, I am encountering this now and no direct solution. When I configure the tabs to top, it goes under the header. The css value top calculated as 44 by class has-header is still not moving it down. Any inputs how you got past this?