4

I have downloaded default master-detail template from onsen ui, and then developed an cordova mobile application based on it.The header title in navigation bar is centered on pc-browser and chrome ripple, but not on device. On device it will stick to the left. I have add this style to see what is going on.

    .navigation-bar__center
    {
        text-align:center;
        border:solid;
        border-width:1px;
    }
    .navigation-bar
    {
        border:solid;
        border-color:#f00;
        border-width:1px;
    }

it seems the correspond div for header is not stretched.

this is on pc-browser

enter image description here

And this is on mobile device (samsung android 4.2)

enter image description here

ps. the problem exists on all pages.

Dawson Loudon
  • 6,029
  • 2
  • 27
  • 31
Reza
  • 18,865
  • 13
  • 88
  • 163

1 Answers1

9

Try using fixed-style attribute on the navigation bar tag. Like this

<ons-toolbar fixed-style>
  <div class="center">
    This will be centered
  </div>
</ons-toolbar>

Actually, the reason why it isn't centered on the device is that Onsen UI tries to emulate native behavior. On Android the navigation bar title is not centered, but left-aligned.

Andreas Argelius
  • 3,604
  • 1
  • 13
  • 22