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.
Related
I'm using angular-1.5.8, d3-3.5.17, nvd3-1.8.5, and angular-nvd3-1.0.9 with Angular Material. I'm trying to put an NVD3 directive in an $mdDialog. The source code is simple:
<md-dialog aria-label="FooBar">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>FooBar/h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="dialog.close()">
<md-icon>close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<nvd3 options="dialog.options" data="dialog.data"></nvd3>
</md-dialog-content>
<md-dialog-actions>
<md-button ng-click="dialog.close()">
Close
</md-button>
</md-dialog-actions>
</md-dialog>
I am using $mdDialog.show() with fullscreen: true. As you know even with fullscreen: true, the dialog only goes full-screen if the browser windows is small enough.
Anyway, I'm having numerous problems with a chart of type scatterChart. Here are a couple of big ones:
A scatter chart with 16 points shows up really, really small! I don't want to hard-code in a width/height. Is there a zoom option to NVD3 to say "show double the size you normally would"?
If I make the browser (Chrome) small enough, the mdDialog suddenly pops to full screen! And the NVD3 chart expands dynamically to fill the full width! Pretty cool! But the height of the chart stays the same. Now I have a wide chart with a tiny height; the mdDialog close button is almost at the top of the screen, with a huge blank under it.
If I manually set <md-dialog-content style="min-width=500px;min-height=300px"> just as an example, the same thing happens: the NVD3 charge expands horizontally to fill the width, but there is a huge blank space under the the chart, above the close button.
How do I get an NVD3 chart to play nicely with an mdDialog, and fill the entire dialog content area?
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.
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'm working with Angular Materia 0.10.1.
I have a md-button nested inside a md-list-item. Both elements triggers the ripple effect when clicked, and when I click the button, it triggers the ripple effect on both elements at the same time. I want to have ripples on the button or on the list element only, but never both at the same time.
<md-list flex>
<md-list-item ng-click="a('a')">
<p>Some name</p>
<md-button class="md-accent md-raised" ng-click="b('b', $event)">Do something</md-button>
</md-list-item>
</md-list>
I've used $event.stopPropagation() but it doesn't stop the ripples in the same way it stops nested click events.
This Plunker can demonstrate it better.
It seems to be something built into the md-primary class and how it works with the list item. If you look at the examples there are a few that have side buttons that do not exhibit this behavior
by simply swapping the class on your button to md-secondary it seems to fix your issue (styling is a separate one now though)
<md-button class="md-secondary md-raised" ng-click="b('b')">Do something</md-button>
http://plnkr.co/edit/4fo8u190gpKyoHznVbFM?p=preview
Alternatively, the example uses md-icon instead of buttons and that seems to work too.
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.