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.
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.
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 am using Angular Material, which makes use of Flexboxes.
I would like to wrap boxes so that they spread across several rows. I am actually successfully doing this with the following code :
<div layout="row" layout-align="start start" layout-wrap layout-margin>
<md-card ng-repeat="SOME ITERATION" flex>
SOME CONTENT
</md-card>
</div>
However rows are not filled completely. The <md-cards> don't strech until filling the whole space available in one row.
Here is a visual representation of what I would like to do :
<md-cards> would be the orange boxes, and they would fill the whole space on each available row.
Any suggestion about how to implement this with Flexboxes (if possible) is most welcome !
I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.
Within each md-menu-item I have md-select inputs. It looks like this:
...
<md-menu-item>
<md-input-container>
<label>My Label</label>
<md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
<md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
{{foo.name}}
</md-option>
</md-select>
</md-input-container>
</md-menu-item>
...
If I open the menu via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.
If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.
Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?
Here is a codepen example of what I am seeing.
Thank you for any suggestions!
To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.
$(document).bind('click', function (event) {
$mdSelect.hide();
});
The problem here is with menu and select backdrops which are used to close corresponding elements, when clicked out. So it's angular material thing. You can change z-index of these backdrops. Defaults are specified in variables.scss file (as you can see menu's backdrop is above select's, so you close it first):
$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;
That's the only quick fix I see (you can change z-index for these backdrops just in your css).
I am trying to create a menu bar recursively using Angular Material Menu Bar directive, but the result is not being as expected. The best solution I have so far is to create a directive and call it recursively, like shown here: https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA. Notice that there are two menu bars in this Plunker. The first is created with my recursive structure from a JSON and the second is written directly on the template. The problem with my solution happens when there are nested menus like "Lorem -> Dolor -> ...", as the nested menus are not being aligned correctly.
Inspecting the generated code on Chrome, I notice that the nested menu in the second menu bar (written directly on template) has some properties regarding its nest state:
<md-menu md-position-mode="cascade"
class="md-nested-menu md-menu ng-scope"
md-nest-level="1">
...
</md-menu>
while the same menu in the first menu bar doesn't:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope">
...
</md-menu>
What can I do to fix this?
Just adding an information: I have already tried an approach using ng-include to create the menu bar, but the result was terribly worse.
I was able to solve the problems with the menu behaviour by setting the attributes and classes mentioned in the question "manually" in the directive template, like this:
<md-menu ng-if="ctrl.isCompoundedMenuItem()"
md-position-mode="cascade"
class="md-nested-menu"
md-nest-level="{{ ::nestLevel }}">
Where nestLevel is in the isolated scope and is incremented on every new level:
<md-menu-content class="md-menu-bar-menu md-dense">
<my-menu-item ng-repeat="item in menu.items" menu="item"
nest-level="{{ ::(nestLevel + 1) }}"></my-menu-item>
</md-menu-content>
Starting by 1, naturally:
<md-menu-bar ...>
...
<md-menu-content>
<my-menu-item ng-repeat="item in menu.items" menu="item"
nest-level="1"></my-menu-item>
</md-menu-content>
</md-menu-bar>
The updated plunker can be seen here: https://plnkr.co/edit/QBjeR2hZFKsJ88Hl4ptG.
Sometimes we want to specify alignment on the right side of an element, for example if we have a menu on the right side a toolbar, we want to right align our menu content.
We can specify the origin by using the md-position-mode attribute on both the x and y axis. Right now only the x-axis has more than one option. You may specify the default mode of target target or target-right target to specify a right-oriented alignment target. See the position section of the demos for more examples.
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="target-right target">
OR
It is sometimes unavoidable to need to have a deeper level of control for the positioning of a menu to ensure perfect alignment. md-menu provides the md-offset attribute to allow pixel level specificty of adjusting the exact positioning.
This offset is provided in the format of x y or n where n will be used in both the x and y axis.
For example, to move a menu by 2px from the top, we can use:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-offset="120 0">
mdMenu API Documentation