View title not centered in sidemenu sample app on android

ionic-v1
1

I’m just running the sidemenu demo from here https://github.com/driftyco/ionic-starter-sidemenu

When it runs in chrome everything looks fine:

image
Screen Shot 2015-03-27 at 5.43.22 PM.png1102×1862 122 KB

But when I test it on any Android device (with Developer tools in Chrome) the view title gets aligned to the left:

image
Screen Shot 2015-03-27 at 5.44.20 PM.png1136×1884 164 KB

I have tested it in my Android simulator too, same issue.

Has anyone encountered this?

2

I think that is by design. It is basically to imitate native UI as closely as possible.

3
4

Yes, it is by design. You can override it using align-title on the header-bar/nav-bar or using $ionicNavBarDelegate.align(‘center’)

<ion-header-bar align-title="center" class="bar-positive">
4 Likes
5

Thanks. Its working fine.
But when I use this with enable-menu-with-back-views=“true”, I got some problem.
On pages where we get back button, title goes to right(left and right are not equal).
If you can check and help me tin this. Below is my code.

<ion-side-menus enable-menu-with-back-views="true">
  <ion-pane ion-side-menu-content drag-content="false">
    <ion-nav-bar align-title="center" class="bar-positive">
      <ion-nav-buttons side="left">
6

What version of Ionic are you using? You can run ionic info and paste this to me.

7

In my bower file i have this entry
"ionic": “v1.0.1”

8

Hmm I can’t reproduce this with the code you’ve given. Could you put together a codepen or plunker showing this?

Also, the markup for the sidemenu changed, so you shouldn’t use ion-pane anymore:

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>
9

yeah me too , i have some problems also in center title on android only

and i can’t make codpen for this because it’s only on android , so idk really how can i show it to u

so what should i do?

10

You can still make a codepen and put the following script tag at the end of the body, this will force it to act like an Android device:

<script>
  ionic && ionic.Platform && ionic.Platform.setPlatform("android");
</script>

Here is an example of changing the platform to android: http://codepen.io/brandyshea/pen/GgzbjG

11

thx @brandyshea for ur replay , and i got the problem :smile:

i was using nav-transtion=“ios” on menu toggle,
so when i open the menu side on android happen Messing up

1 Like