<md-content flex class="md-padding page-content">
<div ui-view flex layout="column">
<div class="center" layout="row" flex>
<md-content layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
In my code above, the outermost md-content occupies the complete page; however with the ui-view gived column layout and flex class, I expected it to occupy the complete height of the page, however it occupies the height consumed by the content only.
Can you please help with the error in the code, so ui-view can occupy the complete page?
Here you go - CodePen
You need to utilise layout-fill. From the docs
In order for this to work an upper element must occupy the full screen. In the above example it is <body>.
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill>
<md-content layout-fill flex class="md-padding page-content">
<div ui-view flex layout="column" layout-fill>
<div class="center" layout="row" flex>
<md-content id="list" layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities" flex="none">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content id="details" layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
</div>
CSS
.page-content {
background: yellow
}
#list {
overflow-y: auto;
overflow-x: hidden;
}
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 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
I am using Angular-Material and have implemented a SideNav menu. When the screen size is small, the menu is hidden and when click on the Menu toggle button, the menu slides out from the left, with a full page height. When the screen is larger, the menu appears fixed to the left side, but not at full page height.
How can i make the fixed menu appear to be full page height.
I have been playing with the css and other md attributes, but just can't find out how.
<div ng-controller="appCtrl" layout="vertical" layout-fill>
<md-toolbar class="md.medium-tall app-toolbar">
<div class="md-toolbar-tools" ng-click="toggleMenu()">
<button class="menu-icon" hide-sm aria-label="Toggle Menu">
<md-icon icon="img/icons/ic_menu_24px.svg">
<object class="md-icon" data="img/icons/ic_menu_24px.svg"></object>
</md-icon>
</button>
<h2>
<span>Dev.Material</span>
</h2>
</div>
</md-toolbar>
<section layout="horizontal" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')">
<md-toolbar md-theme="purple">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content class="md-padding" ng-controller="menuCtrl">
<p>
This sidenav is locked open on your device. To go back to the default behavior,
narrow your display.
</p>
</md-content>
</md-sidenav>
<md-content flex class="md-padding">
Some content !!
</md-content>
and the controller:
(function () {
'use strict';
var controllerId = 'appCtrl';
angular.module('app').controller(controllerId,
['$scope', '$timeout', '$mdSidenav', appCtrl]);
function appCtrl($scope, $timeout, $mdSidenav) {
var vm = this;
$scope.toggleMenu = function() {
$mdSidenav('menu').toggle();
};
};
})();
(function () {
'use strict';
var controllerId = 'menuCtrl';
angular.module('app').controller(controllerId,
['$scope', '$timeout', '$mdSidenav', menuCtrl]);
function menuCtrl($scope, $timeout, $mdSidenav) {
var vm = this;
$scope.close = function() {
$mdSidenav('menu').close();
};
};
})();
I had the exact same issue with angular-material 0.6.0 rc1. (I used the code from the demo site).
The problem does not come from the angular-material code, but from the parent css container of your page which is not full height.
Your page should have a structure like :
<ui-view class="ng-scope">
<div ng-controller="appCtrl" layout="vertical" layout-fill>
... your md sidenav code here ...
</div>
</ui-view>
The issue comes from the ng-scope class wich is not full height. In my case I just copy / past the code from the demo site and add this im my cutom css file
.ng-scope { height: 100%; }
The result is a full height sidenav working fine in both locked-open and unlock mode.
This worked for me...
1) Wrap your sidenav in a div that has a layout="vertical" like so...
<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>
2) Add "flex" in your sidenav so that it will flex to fill out the full page height.
<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>
I fixed this same issue by adding a class to my sidenav with
position: fixed;
I had a similar Problem. Setting style"height: 100vh;" worked for me.You can also use a class.
<div layout="column" style="height:100vh;"></div>
layout="vertical" can also be used - it doesn't have any significant effect in my context.
Try adding layout-fill attribute on main md-content tag that has ui-view attribute set.
<md-content ui-view layout-fill layout-align="center center">
</md-content>
You need to use flex in both the sidebar and content, as well as in the top container. This way you don't need to use any additional styles.
Here is your code working correctly (note that I updated some parts to the latest Angular Material version):
<div ng-controller="appCtrl" layout="column" flex>
<md-toolbar class="md.medium-tall app-toolbar">
<div class="md-toolbar-tools" ng-click="toggleMenu()">
<button class="menu-icon" hide-sm aria-label="Toggle Menu">
<md-icon icon="img/icons/ic_menu_24px.svg">
<object class="md-icon" data="img/icons/ic_menu_24px.svg"></object>
</md-icon>
</button>
<h2>
<span>Dev.Material</span>
</h2>
</div>
</md-toolbar>
<section layout="row" flex>
<md-sidenav flex class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar md-theme="purple">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content class="md-padding" ng-controller="menuCtrl">
<p>
This sidenav is locked open on your device. To go back to the default behavior,
narrow your display.
</p>
</md-content>
</md-sidenav>
<md-content flex class="md-padding">
Some content !!
</md-content>
</section>
</div>
Just create a sidenav outside a <div>. For example, just after the <body> tag, you could write:
<body layout="row">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-md')">
<md-toolbar md-theme="deep-orange">
<h2 class="md-toolbar-tools">Menu</h2>
</md-toolbar>
<md-content ng-controller="menuBar" md-theme="deep-orange">
<md-button layout-align="left" ng-repeat="item in items" ui-sref="{{item.location}}" class="menu-item"
md-ink-ripple="#bbb" aria-hidden="false">
<!-- the above <md-button> just repeats buttons created in the JS -->
<span>{{item.label}}</span>
</md-button>
</md-content>
</md-sidenav>
<!-- Other content ... -->
</body>
This code will give you a fully vertical sidebar.
None of the above worked for me for the angular material ver: 1.1.0-RC.5, so I did it like this :
<body layout="column">
<div layout="row" ng-controller="reviewController" ng-cloak flex>
<div layout="row">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">
<md-toolbar class="md-theme-indigo" class="md-medium-tall">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<div ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-sm>
Close Sidenav Left
</md-button>
<p hide show-gt-sm flex>
This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
</p>
<p flex>
hi
</p>
<p flex>
there!
</p>
</div>
</md-sidenav>
<div layout-column flex>
<p flex>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p flex>
The right sidenav will focus on a specific child element.
</p>
<div flex>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-sm>
Toggle left
</md-button>
</div>
<div flex>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
Toggle right
</md-button>
</div>
<md-content ui-view layout="column" flex></md-content>
</div>
<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding>
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-autofocus>
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</div>
</div>
The above code is almost same as that given in the angular material docs and the Js file is also similar to that given in docs :)
EDIT:
More references:
1. https://gist.github.com/epelc/6aa345f4496776569830. Correct the depreciated value of $media('gt-lg') to $mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092
The above issue was resolved only by modifying css and no need to change any code at all.
Solution-
.ng-scope { height: 100%; }
<div layout="column" layout-fill>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-md')"
md-disable-backdrop
md-whiteframe="4">
<md-content>
<div layout="row" layout-align="center center">
<md-button ng-click="closeSideNav()" class="md-primary">
Agregar Zona +
</md-button>
</div>
<p hide show-gt-md>
This sidenav is locked open on your device. To go back to the default behavior,
narrow your display.
</p>
</md-content>
</md-sidenav>
</section>
Test
I tried so many things to fix this issue, and I finally was able to fix it by adding the uiview directly to my menu component:
<menu uiview layout="column" class="menu"> </menu>
I didn't try the other fixes with directives but I used this simple css and got what I needed. Any corrections or advice about this css would be welcome.
md-sidenav {
height: -webkit-fill-available;
}