Search code examples
csshtmlonsen-ui

Navigationbar text in not centered on device when using onsen ui

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.

Solution

  • 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.