web-dev-qa-db-fra.com

Comment obtenir un sidenav pleine hauteur avec Angular-Material

J'utilise Angular-Material et j'ai implémenté un menu SideNav. Lorsque la taille de l'écran est petite, le menu est masqué et lorsque vous cliquez sur le bouton bascule Menu, le menu sort de la gauche, avec une hauteur de page complète. Lorsque l'écran est plus grand, le menu apparaît fixé sur le côté gauche, mais pas à pleine hauteur de page.

Comment puis-je faire en sorte que le menu fixe semble être à pleine hauteur. J'ai joué avec le CSS et d'autres attributs md, mais je n'arrive pas à savoir comment.

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

et le contrôleur:

(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();
    };
};
})();
angularjsmaterial-design
29
James

J'ai eu exactement le même problème avec le matériau angulaire 0.6.0 rc1. (J'ai utilisé le code du site de démonstration ).

Le problème ne vient pas du code du matériau angulaire, mais du conteneur CSS parent de votre page qui n'est pas pleine hauteur.

Votre page doit avoir une structure comme:

<ui-view class="ng-scope">
    <div ng-controller="appCtrl" layout="vertical" layout-fill>
        ... your md sidenav code here ...
    </div>
</ui-view>

Le problème vient de la classe ng-scope qui n'est pas pleine hauteur. Dans mon cas, je viens de copier/coller le code du site de démonstration et d'ajouter ce fichier im mon cutom css

.ng-scope { height: 100%; }

Le résultat est un sidenav pleine hauteur qui fonctionne bien en mode verrouillé-ouvert et déverrouillé.

25
Elijun

Cela a fonctionné pour moi ...

1) Enveloppez votre sidenav dans un div qui a un layout = "vertical" comme ça ...

<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>

2) Ajoutez "flex" dans votre sidenav afin qu'il fléchisse pour remplir toute la hauteur de la page.

<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>
18
ng-darren

J'ai résolu ce même problème en ajoutant une classe à mon sidenav avec

position: fixed;
12
phil_lgr

J'avais un problème similaire. Réglage du style "hauteur: 100vh;" travaillé pour moi. Vous pouvez également utiliser une classe.

<div layout="column" style="height:100vh;"></div>

layout = "vertical" peut également être utilisé - il n'a pas d'effet significatif dans mon contexte.

4
phil

Essayez d'ajouter layout-fill attribut sur le principal md-content balise contenant ui-view ensemble d'attributs.

<md-content ui-view layout-fill layout-align="center center">

</md-content>
4
sajmons

Vous devez utiliser flex à la fois dans la barre latérale et le contenu, ainsi que dans le conteneur supérieur. De cette façon, vous n'avez pas besoin d'utiliser de styles supplémentaires.

Voici votre code qui fonctionne correctement (notez que j'ai mis à jour certaines parties vers la dernière 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>
2
Jesús Carrera

Créez simplement un sidenav en dehors d'un <div>. Par exemple, juste après le <body> tag, vous pouvez écrire:

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

Ce code vous donnera une barre latérale entièrement verticale.

1
A. J. Alger

Rien de ce qui précède n'a fonctionné pour moi pour le angular matériau ver: 1.1.0-RC.5 , donc je l'a fait comme ça:

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

Le code ci-dessus est presque le même que celui donné dans les documents angular material et le fichier Js est également similaire à celui donné dans les documents :)
MODIFIER:
Plus de références:
1. https://Gist.github.com/epelc/6aa345f44967765698 . Corrigez la valeur dépréciée de $media('gt-lg') à $mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092

0
jAYANT YADAV

Le problème ci-dessus n'a été résolu qu'en modifiant css et pas besoin de changer de code.

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

0
Manpreet
<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>

Tester

0
Vesper

Je n'ai pas essayé les autres correctifs avec des directives mais j'ai utilisé ce simple css et obtenu ce dont j'avais besoin. Toute correction ou conseil sur ce css serait le bienvenu.

md-sidenav {
  height: -webkit-fill-available;
}
0
Mohammed Salman Shaikh

J'ai essayé tellement de choses pour résoudre ce problème, et j'ai finalement pu le corriger en ajoutant directement uiview à mon composant de menu: <menu uiview layout="column" class="menu"> </menu>

0
cheesydoritosandkale