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!
Related
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
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'm quite new in angular-md and trying to make obvious thing - sidenav with cards on the right. The code is not that hard http://codepen.io/anon/pen/qZPRmq
<body ng-app="BlankApp" ng-cloak layout="column">
<div flex layout="row">
<md-sidenav md-is-locked-open="true" class="md-sidenav-left md-whiteframe-z2" layout="column">
Some form here
</md-sidenav>
<!-- Container #4 -->
<md-content flex layout="column" class="md-padding" layout-padding>
<md-grid-list flex md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile flex>
<md-card>
First card here
</md-card>
<md-card>
Second card here
</md-card>
</md-grid-tile>
</md-grid-list>
</md-content>
</div>
But the problem is that md-grid-tile runs away from the md-content block and get's overlapped by sidenav (and sometimes by md-toolbar). What i'm doing wrong?
Change
<md-grid-tile flex>
<md-card>
First card here
</md-card>
<md-card>
Second card here
</md-card>
</md-grid-tile>
to
<md-grid-tile>
<md-card>
First card here
</md-card>
</md-grid-tile>
<md-grid-tile>
<md-card>
Second card here
</md-card>
</md-grid-tile>
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