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.
Tabbar navigation
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.
Related
I'm new to AngularJS Material and am trying to get a mdDialog to work, but am running into a weird issue with md-tabs. My labels are pretty long and the scrolling/pagination doesn't work. If I change my md-tab label to something short like label="Part {{$index + 1}}", it works great.
What do I need to change in order for the tab scrolling to work
<md-dialog-content>
<md-tabs md-dynamic-height md-border-bottom md-selected="tabIndex">
<md-tab ng-repeat="x in data.sections track by $index" label="{{x.section_name}}">
<!-- content goes here --->
</md-tab>
</md-tabs>
</md-dialog-content>
Below is a snapshot of what my dialog box looks like. Both scrolling arrows are disabled for some reason and I can't figure out how to fix it.
Please look at this.
When you right click the words "Basic usage"(seen at top of the page, first block), you can see below html:
<md-toolbar class="demo-toolbar md-primary">
<div class="md-toolbar-tools">
<h3 class="ng-binding">Basic Usage</h3>
<!-- ...other html -->
And when you select "md-toolbar" from above code in elements panel, it will show that it has background color of some blue. And it shows style source as
<style>...</style>.
When you click it, will show it like(click and see please). But generally, it either gives filename.css or says index if css is embedded in html file. But this seems different.
So, my question is there anything "angular/material" with it. Whats going on here ?
From Theme/Under The Hood docs
Each registered theme results in 16 <style> tags being generated.
It's their way of translating the $mdThemingProvider config from javascript to css
I'd like to do the above app Tutorial effect using Onsen UI.
However, in the Page Patterns of Onsen UI, I didn't see anything similar.
Could someone shed some light on this?
Much appreciated.
I think what you're looking for is a carousel. You can make one using the <ons-carousel> component.
In this case you want to have a swipeable fullscreen carousel so you can define it like this:
<ons-carousel swipeable overscrollable auto-scroll fullscreen>
<ons-carousel-item>
Content #1
</ons-carousel-item>
<ons-carousel-item>
Content #2
</ons-carousel-item>
</ons-carousel>
Here is a simple example of a fullscreen carousel:
http://codepen.io/onsen/pen/xbbzOQ
Please also take a look at the docs:
http://onsen.io/reference/ons-carousel.html
If you want bullets, you can use the carousel.getActiveCarouselItemIndex() in order to get the current active element.
<ons-carousel-cover>
<div class="bullets">
<span
ng-repeat="idx in indices"
ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
•
</span>
</div>
</ons-carousel-cover>
You also need to trigger a digest event to make Angular understand that something changed.
This is the code:
http://codepen.io/argelius/pen/RWomrz
I try to make clickable list item using ons-list-item. When I display my entries like
<ons-list-item modifier="tappable">
...
</ons-list-item>
<ons-list-item modifier="tappable">
...
</ons-list-item>
they are displayed properly.
But list separators disappear when I try to wrap ons-list-item to a tag.
What is the best way to make ons-list-item handle links?
Two ways here. Using HTML:
<a href="http://......">
<ons-list-item>
Item title
</ons-list-item>
</a>
This one is what you already tried. It will change the style of the text, the pointer and other stuff unless you specify something different.
Using JavaScript:
<ons-list-item onclick="window.location='http://......';">
Item title
</ons-list-item>
This one does not change the CSS, so if you don't have any problem with JavaScript it may be a solution. Hope it helps!
I have a view with several UI-Bootstrap accordions on it, each with it's first drawer showing a bunch of graphs (I used the tc-angular-chartjs library).
Now the first drawer of the first accordion is always open on page load and it always loads and draws the graphs on it.
However the first drawer of the second accordion is always closed on page load and when I open the drawer I can see that it's graphs were never drawn.
The funny part is when I change the code to always open the drawer on page load the graphs always start.
EDIT: this is the markup, the accordion is generated inside a data-ng-include
<accordion data-ng-model="machine.accordionOptions.oneAtATime" close-others="machine.accordionOptions.oneAtATime">
<!-- STATUS -->
<accordion-group is-open="machine.accordionOptions.isFirstOpen">
<accordion-heading>
<i class="glyphicon" data-ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
<span class="paused">Status:</span> Low Hit ration since {{2}} hours ago. High machine load average since {{2}} hours ago.
</accordion-heading>
<!-- data-ng-include body -->
<div data-ng-include="'angular/templates/dashboard/status.tmpl.html'"></div>
</accordion-group>
<!-- more drawers-->
</accordion-group>
</accordion>
and inside the 'angular/templates/dashboard/status.tmpl.html' I have several of these ..
<div data-ng-repeat="chart in rpDataLinecharts" class="col-lg-4 grid-box">
<strong>{{chart.title}}</strong> <span style="color: #aaaaaa;">{{chart.hint}}</span>
<div>
<canvas data-tc-chartjs-line data-chart-options="linechart_options" data-chart-data="linechart_data[$index]" data-auto-legend></canvas>
</div>
What am I missing here ?
The tc-angular-charts didn't draw because of a known issue with the Bootstrap Accordion and Canvas, if it's not showing it shouldn't draw and when the accordion drawer opens to reveal the charts, nothing tells the canvas code to run.
In the end I've replaced them with Angular-nvd3 charts which use SVG, and everything went fine from then on.