CODEWITHSUNDEEP
angularjsmaterial-design
James
James

Reputation: 291

How to get a full height sidenav with Angular-Material

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();
    };
};
})();

Upvotes: 29

Views: 56832

Answers (12)

Mohammed Salman Shaikh
Mohammed Salman Shaikh

Reputation: 93

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;
}

Upvotes: 0

cheesydoritosandkale
cheesydoritosandkale

Reputation: 609

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>

Upvotes: 0

Philip E
Philip E

Reputation: 858

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.

Upvotes: 5

Vesper
Vesper

Reputation: 433

<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

Upvotes: 0

ng-darren
ng-darren

Reputation: 1042

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>

Upvotes: 18

Manpreet
Manpreet

Reputation: 1

The above issue was resolved only by modifying css and no need to change any code at all.

Solution- .ng-scope { height: 100%; }

Upvotes: 0

jAYANT YADAV
jAYANT YADAV

Reputation: 170

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

Upvotes: 0

Jes&#250;s Carrera
Jes&#250;s Carrera

Reputation: 11425

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>

Upvotes: 2

phil_lgr
phil_lgr

Reputation: 372

I fixed this same issue by adding a class to my sidenav with

position: fixed;

Upvotes: 13

sajmons
sajmons

Reputation: 258

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>

Upvotes: 4

Dr G.
Dr G.

Reputation: 1332

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.

Upvotes: 1

Elijun
Elijun

Reputation: 349

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.

Upvotes: 25

Related Questions