I'm developing iOS/Android app using Monaca + Onsen UI. I'm using the following HTML structure for each page:
tabbar.html
<ons-page>
<ons-tabbar var="mainTb">
<ons-tabbar-item no-reload icon="home" label="HOME" page="home.html" active="true">
</ons-tabbar-item>
<ons-tabbar-item no-reload icon="talk" label="TALK" page="talkList.html">
</ons-tabbar-item>
...
</ons-tabbar>
</ons-page>
talkList.html
<ons-page ng-controller="TalkListController">
<!-- This is the "Navigation bar" -->
<ons-toolbar>
<ons-toolbar-button ng-click="fnShowGlobalMenu()">
<ons-icon icon="ic_global"></ons-icon>
</ons-toolbar-button>
</ons-toolbar>
<!-- The list of talk -->
<ons-list>
<ons-list-item ng-repeat="r in talkRow" ng-click="showTalk(r.talkCode)">
<ons-row>
<ons-col>
<div>
{{r.userName}}
</div>
<!-- Some talk list info... -->
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
talkDetail.html
<ons-page ng-controller="TalkDetailController">
<!-- This page have "Go back" icon instead of "Global Menu" -->
<ons-toolbar>
<ons-toolbar-button ng-click="fnShowGlobalMenu()">
<ons-icon icon="ic_global"></ons-icon>
</ons-toolbar-button>
</ons-toolbar>
<!-- This is where message bubbles show up for users. -->
<ons-list-item ng-repeat="r in messageRow" repeat-done="toBottom()">
...
</ons-list-item>
<!-- This is text area to enter message to send. -->
<ons-bottom-toolbar>
..
</ons-bottom-toolbar>
</ons-page>
Basically, the navigation takes two steps to show talkDetail which shows the users talk in timeline. The user taps tabbar item "TALK", then it navigates to talklist.html. The user next choice which one to talk to, and taps one of ons-list-item which invoke the showTalk(). This showTalk() is simply this._scope.appRoot.pushPage(pageName, params);
The code works almost perfectly, except when the page is moving to talkDetail.html. When navigate from talkList.html to talkDetail.html, the "navigation bar" (ons-toolbar) in talkDetail.html shrinks its height, makes the title text and "back button" in that area harder to tap.
This happens only in iOS device and not in Android.
Is there any way to fix this ? I have tried to "override" css but I don't know whether that's the proper way. Sorry for noob question. I'm quite new to Onsen UI and Monaca...
Well, as you can see in iOS the toolbar background includes the status bar of the OS. Onsen UI has an auto status bar fill feature which finds the appropriate toolbars and makes them larger.
It seems that your structure is maybe a little strange and causes Onsen UI to think that that specific toolbar doesn't need to be larger.
The proper way to solve this would be to inspect your structure and see why it doesn't think that it's needed. If you fix the cause then everything will work without further changes.
The implementation of that feature has gone trough some changes so actually mentioning the version which you are using may be useful. If you're using Onsen 2 the implementation will add a status-bar-fill attribute to the pages which thinks need it. For Onsen 1 the implementation is a bit different so inspecting may be a little hard.
Unfortunately I am not really sure that I have a clear enough understanding of your structure that I can point out the mistake. You could make a codepen with this example, so that we can understand the situation a little better. Right now I can only see a tabbar and some pages, however you said you are using something like this._scope.appRoot.pushPage(pageName, params) which sounds like a navigator, which isn't mentioned elsewhere.
And about overriding the css - it's not really the proper way to fix it, however if the other way is taking too much time and effort you might want to consider it. And if you're not really interested in changing the background of the status bar you could simply do ons.disableAutoStatusBarFill() and body {top: 20px} in iOS.
