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 !
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?
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.
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'm trying to build a side Control Panel for Dashboard something similar to http://demo.neontheme.com/dashboard/highlights/
Can anyone give me some pointers for some examples where I can start building it ?
Thanks
Take a look at Bootstrap's vast range of Components (if you haven't already), and break down the functionality according to what you wish to accomplish.
For example, at a glance:
I can see that the page is fluid, and the left-hand navigation takes up roughly 2/12 (by default, Bootstrap utilises a 12-column grid system).
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-2">
<!-- Menu -->
</div>
<div class="col-md-10">
<!-- Content -->
</div>
</div>
</div>
</div>
Accordions are in use to collapse/expand menu items, so you can harness Bootstrap's collapse.js to achieve this.
Also, some menu items have Labels and/or Badges attached to them, which Bootstrap also caters for.
Resources:
http://www.getbootstrap.com/css/#grid-example-fluid
http://www.getbootstrap.com/javascript/#collapse
http://www.getbootstrap.com/components/#labels
http://www.getbootstrap.com/components/#badges
I am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the way explained in this post.
However, I am planning to modify my current carousel widget to accept a number that will determine how many slides will be displayed in 1 frame, and dynamically changes its display.
For example, if 3 is passed, then 3 slides will be displayed in 1 frame.
The way I have my 2-slides-in-1-frame carousel widget is pretty static (the number of slides shown in 1 frame is already defined in its HTML). Is it possible to do this? Any help is really appreciated! Thanks.
There is no need to modify the angular-ui-bootstrap carousel, just display a row with two or three columns inside the carousel.
This is a my fork of the original angular-ui-bootstrap carousel plunkr:
http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6
The short version is:
<slide ng-repeat="slide in slides" active="slide.active">
<div class="row">
<div class="col-xs-6">
... first cell
</div>
</div>
<div class="row">
<div class="col-xs-6">
... second cell
</div>
</div>
</slide>
Then what you can do is create your own templating directive that does the math on how many columns to display (2 = col-xs-6, 3 = col-xs-4, ... ) and renders the above partial with the appropriate column classes.