Ion-tabs and ion-view titles problem?

ionic-v1
1

Hello guys! Im having some problems when i use myapp on the android. and i also tried it with ionic tabs, but problem is the same… left pic is in the browser firefox, right one is on android. why the tabs are on the top? and ion-view-title is the left?

Thanks a lot from now…

image
browser.jpg435×684 37.6 KB

2

By default, Ionic will try to adapt to a native platform.

Android by default has a top positioned tab bar.

You can move it back like this:

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
3

yes! thanks man… it works. what about the titles? how can i fix them?

and another question is padding scroll does not work on the android…

thanks for fast response!

4

Try googling about left positioned titles, you’ll find several answers (even in this forum).

5

thank you i will try

6

you can try this align-title=“center”

7

I did it but only horizontally now. the same way as above:

$ionicConfigProvider.navBar.alignTitle(‘center’);

8

You try overriding the default CSS like

.bar .title {
   text-align:center;
}

When we use the header, the html will be something similar to the following.

<ion-header-bar class="bar-positive bar bar-header disable-user-behavior">
  <div class="buttons">
    <button class="button button-icon ion-navicon"></button>
  </div>
  <h1 class="title" style="left: 55px; right: 55px;">Header</h1>
</ion-header-bar>

So, i think you can over ride the css classes. But this is not the preferred way anyways.

9

thanks for reply. I solve it with $ionicConfigProvider.
your method may be useful, but i need vertical position of the title, like vertical-align…