I am showing cards using ng-repeat. The data and all is coming fine but somehow i am struggling to have 3 cards in a row and go to the next row for the other items.
My ng-repeat code is as follows:
<md-content ng-repeat="agent in agents|filter:search" layout="row">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-subhead">{{agent.RCustId}}</span>
<span class="md-headline">{{agent.FullName}}</span>
<span class="md-subhead">{{agent.ContactNum}}</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
{{agent.address}}
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button>Collect {{agent.balance_amount}}</md-button>
</md-card-actions>
</md-card>
</md-content>
I want the card side by side but these are coming one per each line.
Where is the issue and how to resolve it please.
Try surrounding md-card with a <div> with layout-wrap - you can then use flex=".." - with number corresponding to number of columns you want in row.
See layout options documentation here.
<div class='md-padding' layout="row" layout-wrap>
<md-card flex="33" ng-repeat="agent in agents|filter:search">
See answer here for more detail and examples.
Add the content inside section
<section layout="row" layout-sm="column" layout-wrap>
// your code
</section>
Working example http://plnkr.co/edit/hE38nAAJT35UJL71JGoS?p=preview
Related
I have nested virtual repeats and it renders without problem, but I am having strange scrolling problem. If I scroll down, I cannot view all items and it jumps to another parent item. Well, it is hard to explain.
I assume that problem is the predefined height for parent items. Virtual repeat sets the same height for each item, but mine is not same height. That is why I am having the scrolling problem, but I could not find any solution that makes a dynamic height for each item(not rendering for scrolling).
I have created a pen and please try to scroll down slowly and you will understand what I mean.
Here is the link: https://codepen.io/semihgk/pen/Pzrwkj
<div ng-controller="AppCtrl as ctrl" class="content virtualRepeatStoreList" ng-app="MyApp">
<md-virtual-repeat-container class="vertical-container" style="height:550px">
<div md-virtual-repeat="item in ctrl.items">
<md-card flex="">
<md-card-title>
<md-card-title-text>
<span class="md-display-2">{{ item.nbr }}</span>
</md-card-title-text>
</md-card-title>
<md-list style="overflow:auto;height:auto;" flex ng-cloak layout="column">
<md-divider></md-divider>
<md-list-item layout="row" class="noright">
<md-subheader flex>Item</md-subheader>
</md-list-item>
<md-list-item ng-repeat="it in item.items" style="max-height:40px;overflow:hidden;" class="noright">
<p>{{ it.nbr }}</p>
<md-checkbox class="md-secondary" ng-model="it.checked"></md-checkbox>
</md-list-item>
</md-list>
</md-card>
</div>
</md-virtual-repeat-container>
</div>
If anyone has any idea, I would be so appreciated. Thank you very any advice!
I'm following angular material starter application example, but in side nav bar there is lot of extra space between list items. When I open the page in Mozilla I don't have the issue but It doesn't loook good in Chrome.
<md-toolbar layout="row">
<h1>Angular Material - Starter App</h1>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"
class="md-whiteframe-z2">
<md-list>
<md-subheader class="md-no-sticky">Favorites</md-subheader>
<md-list-item class="md-1-line">
<h3>Bio</h3>
</md-list-item>
<md-divider></md-divider>
<md-list-item class="md-1-line">
<h3>Professional</h3>
</md-list-item>
</md-list>
</md-sidenav>
<md-content flex id="content">
<p>Main Content will come here</p>
</md-content>
</div>
I am currently exploring Angular Material. But I wondered how I could place several cards next to each other. I do this with an ng-repeat. But what I want is that a maximal amount of three can be next to each other so that the 4th card starts in a new row dynamically.
Any ideas how to build this without custom css?
<md-content layout-xs="column" layout="row">
<div flex-xs flex-gt-xs="120" layout="column" ng-repeat="item in items">
<md-card> .... </md-card>
</div>
</md-content>
You can do it using flex:
<md-content layout-xs="column" layout="row" flex>
<md-card ng-repeat="item in items" flex="33"> .... </md-card>
</md-content>
And adding the following css property:
md-content{
flex-wrap: wrap;
}
EDIT:
As pointed out by #juleee, it could also be achieved by adding the layout-wrap directive:
<md-content layout-xs="column" layout="row" flex layout-wrap>
Which would automatically add the above css to md-content.
I'm trying to figure out why my md-card-title-text Doesn't render right,
I don't have any extra css on it, just default angular-material
I'm using te following code to show it:
<md-card>
<md-card-header>
<md-card-avatar>
<img class="md-user-avatar" src="https://material.angularjs.org/HEAD/img/100-2.jpeg" />
</md-card-avatar>
<md-card-header-text>
<span class="md-title">User</span>
<span class="md-subhead">subhead</span>
</md-card-header-text>
</md-card-header>
<md-card-title>
<md-card-title-text>
<span class="md-headline">In-card mixed actions</span>
<span class="md-subhead">Reversed</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="start center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
<md-card-icon-actions>
<md-button class="md-icon-button" aria-label="toggle">
<md-icon md-svg-icon="md-toggle-arrow"></md-icon>
</md-button>
</md-card-icon-actions>
</md-card-actions>
</md-card>
here is a screenshot showing the issue:
I had the same error and could not reproduce it within Codepen or anywhere else. After a while of trying I figured out I forgot adding <!DOCTYPE html> to the html file, which solved the problem.
Best Regards,
Benjamin
I want to create nested list (tree) in my application exactly like below. Please suggest me how can i create list like this .
As of Angular 1.2 you can use ng-start/ng-end to create nested trees/iterate over nested lists.
<md-list flex>
<md-list-item style="margin-left: 10px;"ng-repeat-start="item in nestedList">{{item.id}}</md-list-item>
<md-list-item style="margin-left: 50px;" ng-repeat-end ng-repeat="child in item.children">{{child.id}}</md-list-item>
</md-list>
http://codepen.io/jdeyrup/pen/JRPNyW
Unfortunately, as to the last releases of angular material, there is no such directive to make a tree menu like that, you should combine different directive such as the sidebar and the vertical menu.
I used the sidebar in my project:
<section class="wrapper" layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z3 background-red" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar>
<img class="logo" src="images/logo.png" />
</md-toolbar>
<md-content ng-controller="LeftCtrl">
<menu></menu>
<md-button ng-click="close()" class="md-primary" hide-gt-md>
Close Sidenav Left
</md-button>
</md-content>
<div flex></div>
<div class="copy">Copyright © 2015</div>
</md-sidenav>
<md-content class="wrapper" flex>
<div class="wrapper ngview-wrapper" layout="column" layout-fill layout-align="top center" ng-view></div>
<div flex></div>
</md-content>
</section>
You won't need the part that handle opening and closing of the sidebar.
Inside the menu directive you will be able to put everything you want as menu