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;
}
Related
<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 want to make sidenav with angular material.
<div class="example-tabs-500-height elements-sidebar-example ">test1<!-- right sidebar -->
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left"
md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/>
This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click='toggleLeft("left")' class="md-raised">
Toggle Sidenavs
</md-button>
</div>
</div>
</md-content>
</section>
and in controller:
$scope.toggleLeft = toggleLeft;
// $scope.toggleRight = buildToggler('right');
function toggleLeft(componentId) {
console.log('toogle');
return function() {
$mdSidenav(componentId).toggle();
}
}
Function toggleLeft writes in console 'toogle'.
Why are you returning a function?
function() {
$mdSidenav(componentId).toggle();
}
Shou be only:
function toggleLeft(componentId) {
console.log('toogle');
$mdSidenav(componentId).toggle();
}
UPDATE
Take a look on this example: http://codepen.io/anon/pen/pEJOzg
see this angular material demo at http://codepen.io/joyal/pen/mPpGBK
<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
<section layout="row" flex="">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" 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>
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<div layout="row">
<!--This is new-->
<md-sidenav class="md-sidenav-right md-whiteframe-z2" 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-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</div>
</section>
</div>
If you open the left side bar, it opens smoothly but if you open the right side bar, while opening and closing, a scroll bar appears on the page (horizontal scroll bar in the main content area).
How can I update the page so that right side bar opens and closes like left side bar (smoothly without scroll bar on content area)
You can use the overflow: hidden in your body, but it may effect to other component(s). Try this:
#sideNavContainer
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
Hope this help.
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 new to Material Design using angular. I am using this code from codepen as a guide to learn Angular Material.
What I have noticed is that it is responsive when rendered in the desktop browser using Chrome but behaves like normal html when rendered on an iPhone using iPhone 5's default browser. Does Material have no responsive feature support for Safari?
<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" 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>
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-z2" 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-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
here is the iPhone screenshot
below is the expected behavior screenshot from desktop browser
Have you tried defining the viewport?
Put this tag in the <head>:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">