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>
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 haven't found an answer that works for me... Here's my code. My content doesn't scroll. I'm getting my ng-view from a basic template. It's just a bunch of lorem ipsum intended to extend past the end of the page so that I can test this code.
What do I need to do to make my content scrollable? I can't scroll the page at all.
I am running this on a grunt serve dev server. Everything was installed via bower. Ang-material is included properly. Everything looks like it is supposed to, it just doesn't scroll.
(As a side note, my FAB was in it's proper place at the bottom-right last night, I just decided that this is more important so I'm not focusing on it's position right now. It's floating in the middle-right of the page.)
<body ng-app="webApp" layout="column">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<md-toolbar class="md-whiteframe-4dp">
<div class="md-toolbar-tools">
<!-- left side -->
<span flex></span>
<!-- right side -->
<md-button class="md-raised" aria-label="Learn More" ng-href="#/contact">
Contact Me
</md-button>
</div>
</md-toolbar>
<md-content layout="row" flex>
<md-content id="content" flex>
<md-content class="container md-whiteframe-6dp">
<md-content hide show-gt-sm flex layout-padding class="main-text main-view">
<div ng-view></div>
</md-content>
<md-content hide show-sm show-xs flex layout-padding class="main-text">
<div ng-view></div>
</md-content>
</md-content>
</md-content>
<div ng-controller="FabCtrl as fab" class="lock-size" layout-align="end end">
<div class="corner-pad">
<md-fab-speed-dial md-open="fab.isOpen" md-direction="{{fab.selectedDirection}}" ng-class="fab.selectedMode" ng-mouseenter="fab.isOpen=true" ng-mouseleave="fab.isOpen=false" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-primary md-hue-4 md-whiteframe-4dp" ng-href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Call Me</md-tooltip>
<ng-md-icon icon="phone" size="25"></ng-md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="email" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="mailto:jacobkdick#gmail.com">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Email Me</md-tooltip>
<ng-md-icon icon="email"></ng-md-icon>
</md-button>
<md-button aria-label="phone" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Follow Me</md-tooltip>
<ng-md-icon icon="twitter"></ng-md-icon>
</md-button>
<md-button aria-label="github" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="https://github.com/jacobkdick" target="_blank">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Fork Me</md-tooltip>
<ng-md-icon icon="github-circle"></ng-md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
</md-content>
</body>
EDIT: Just applied the overflow scroll tags on my css. Here's a funky result from the bottom-right corner. Both scrollbars are disabled
scrollbars overlay disabled << click here for the picture
This is my code.
<body>
<div ng-controller="MainCtrl as mc">
<md-content>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<span flex="5"></span>
<md-button ui-sref="Home">
example.com
</md-button>
<span flex="20"></span>
<span>something something</span>
<span flex="20"></span>
<md-button ng-show="!login" aria-label="Settings" ui-sref="Login">
Login / Register
</md-button>
<md-button ng-show="login" class="md-icon-button" aria-label="Settings" ng-click="openRightMenu()">
<md-icon class="material-icons">menu</md-icon>
</md-button>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>
</div>
</md-toolbar>
</md-content>
<div ui-view></div>
</div>
</body>
When i click on button to open right side nav it opens but height is same as of toolbar.
How to display sidenav of standard size?
put md-sidenav outside md-content
<div ng-controller="MainCtrl as mc">
<md-content>
</md-content>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>
<div ui-view></div>
if it's inside md-toolbar it will take toolbar height
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;
}