In Angular 1.5 Material I'm using an <md-fab-speed-dial> in a table's row header.
<tr>
<th>Foobar
<md-fab-speed-dial class="md-scale" md-direction="up">
<md-fab-trigger>
<md-button class="md-fab md-mini" aria-label="Menu">
<md-icon>menu</md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Comment" class="md-fab md-raised md-mini">
<md-icon>comment</md-icon>
</md-button>
But the speed dial seems to be reserving space in the table for the FAB buttons! In other words, there is a huge gaping vertical space between "Foobar" and the speed dial trigger. Obviously this defeats the purpose of a triggered speed dial --- if I have to have all that space reserved, I might as well have just listed the FABs without a speed dial.
How do I prevent the speed dial from reserving space in a table for the triggered items? I only want space reserved for the trigger itself.
This concrete implementation of the fab button is made around the flex display and reserves the space needed for the actions present inside the md-fab-actions tag, so it's relying solely on that you'll position it on it's own "layer" (i.e. absolutely or fixed on the screen).
I understand your fustration about the component itself, but that's the way it works... You can look for another component or "tweak" it to use as you need. The tweak is not so hard, and it's not as complicated as Ilia Luzyanin indicates on his comments... you just have to add this style to the md-fab-actions tag:
<md-fab-actions style="position: absolute; bottom: -156px;">
and you're done. Take into account that you'll have to manually set the bottom property to minus the size of the buttons that are inside of it, that is 52px for each one. Here you have a working CodePen with three fabs with 2, 3 and 4 actions inside a table row: Examle
If you want it to open upwards you'll have to replace the "bottom" property for a "top" one, because the action buttons are initially hidden behind the button that triggers them, and their position is relative to 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 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 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
I am using Angular Material and have been looking at the md-grid-list lately for a design requirement I am trying to solve.
I have a bunch of div's that are children to a container with layout row applied. Each of the child items have set widths\heights and have a toggle button to expand\collapse, which just doubles their sizes on expand and then return to original sizes on collapse.
What I'd like is for the child items to re-order to fill available space (provided that space is big enough) around other items that have been expanded.
Right now the container element for my child items also has layout-wrap applied and so of course as items gets expanded, any children that don't fit horizontally just push down below the previous item.
I have come across md-grid-list but I am not so sure this will provide me with what I am after, as it seems to be more suited for percentage based sizes - or have I got that wrong?
I have seen http://masonry.desandro.com/ where if you resize the window on the homepage, that's the kind of behaviour I am looking for, although I would not want the height\widths to update dynamically.
Can this behaviour be achieved using Angular Material components alone?
I am not sure if I understand you correctly but that is exactly what the grid does?
You just set the column count and width/height ratio. You can also set the height of the rows in pixels. And you can configure it depending on CSS breakpoints.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
<md-grid-tile-footer>
<h3>#1: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
As you can see I added a toggle to switch height between ratio and fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}".
Everything is animated by default but you can roll your own animations with angular-animate.
http://codepen.io/kuhnroyal/pen/QyxOQo
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.