Comment obtenir une hauteur totale sidenav avec Angulaires-le Matériel

Je suis en utilisant Angulaires-le Matériel et ont mis en place un SideNav menu. Lorsque la taille de l'écran est petit, le menu est caché et quand on clique sur le Menu basculer bouton, le menu se déploie à partir de la gauche, avec une pleine page de hauteur. Lorsque l'écran est plus grand, le menu semble être fixé sur le côté gauche, mais pas à pleine hauteur de la page.

Comment puis-je faire le menu fixe semble être la pleine hauteur de la page.
J'ai été jouer avec le css et l'autre md attributs, mais juste ne peux 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();
    };
};
})();
  • Vous voudrez peut-être inclure des navigateurs vous vous attendez à du soutien ici... il y a sans doute des solutions à l'aide de vh (fenêtre d'affichage de la hauteur), mais ce n'est pas disponible dans les anciennes versions de CSS. Vous pouvez également utiliser une directive qui surveille tous les événements de redimensionnement et de capture de la mise à jour de la hauteur de l'élément en utilisant offsetHeight ou peut-être l'écran.la hauteur et la stocke quelque part (dans une valeur ou d'un service à l'usine ou quoi que ce soit)
InformationsquelleAutor James | 2014-11-01
  1. 25

    J'ai eu exactement le même problème avec angulaires-le matériel 0.6.0 rc1. (J'ai utilisé le code de la site de démonstration).

    Le problème ne vient pas de la angulaires-le matériel de code, mais de la part du parent css conteneur de votre page qui n'est pas toute la 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 ng-portée de la classe qui n'est pas toute la hauteur. Dans mon cas, j'ai juste copier /coller le code de la site de démonstration et ajouter cette im mon cutom fichier css

    .ng-scope { height: 100%; }

    Le résultat est d'une hauteur totale sidenav fonctionne très bien dans les deux immobilisé ouverte et débloquer de mode.

    • Ne devrait-elle pas être layout="column" au lieu de layout="vertical"?
    • layout="column" ne fonctionne plus. Avec la nouvelle version de la angulaires-le matériel, layout="vertical" ou layout="horizontal" doit être utilisé.
    • comme de 0.8.3 (aujourd'hui): material.angularjs.org/#/layout/container (c'est à dire la ligne / colonne)
    InformationsquelleAutor Elijun
  2. 18

    Cela a fonctionné pour moi...

    1) l'enveloppe de votre sidenav dans un div qui a un layout="vertical" comme si... 

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

    2) Ajouter "flex" dans votre sidenav de sorte qu'il sera flex pour remplir la pleine hauteur de la page.

    <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>
    • Cela a fonctionné pour moi, tandis que les autres réponses n'ont pas.
    • Dans une version plus récente, vous pouvez voir: "$media est déconseillé pour est-verrouillé-ouvert. Utiliser $mdMedia au lieu de". Dans ce cas, utilisez ce is-locked-open="$mdMedia('sm')"
    • Merci beaucoup! La réponse ci-dessus, cela a aidé avec le conteneur parent paramètres de mise en page, mais chaque fois que j'ai mis md-is-locked-open à true, le sidenav étiré, la hauteur minimale requise pour ses enfants. Je n'ai pas pensé à utiliser flex.
    InformationsquelleAutor ng-darren
  3. 12

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

    position: fixed;
    • md-sidenav { position:fixed } et md-backdrop.md-opaque { position:fixed } était une rapide solution facile pour moi. Merci @phil_Igr
    • +m --> m'a Pris une journée pour obtenir ce "fixe"
    InformationsquelleAutor phil_lgr
  4. 4

    Essayez d'ajouter layout-fill attribut principal md-content balise qui a ui-view ensemble d'attributs.

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

</md-content>
    • Assurez-vous que les conteneurs parents sont marquées de façon appropriée à la présentation de remplir ainsi.
    InformationsquelleAutor sajmons
  5. 4

    J'ai eu un Problème similaire. Réglage du style"height: 100vh;" a fonctionné 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.

    InformationsquelleAutor phil
  6. 2

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

    Voici votre code fonctionne correctement (à noter que j'ai mis à jour certaines parties de la dernière Angulaire du Matériel 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>
    • C'est le seul qui a fonctionné pour moi (sur Angular Material 1.0.5), aucun des autres ci-dessous a travaillé avec les plus récentes mises à jour.
    InformationsquelleAutor Jesús Carrera
  7. 1

    Il suffit de créer un sidenav à l'extérieur d'un <div>. Par exemple, juste après la <body> balise, 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 entièrement verticale de la barre latérale.

    InformationsquelleAutor A. J. Alger
  8. 0

    Aucun des ci-dessus a fonctionné pour moi pour l'angle matériel ver: 1.1.0-RC.5, donc j'ai fait comme ceci :

    <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 la même que celle qui est donnée dans l'angle de matériel de docs et de la Js fichier est également semblable à celui donné dans les docs 🙂

    EDIT:

    Plus de références:

    1. https://gist.github.com/epelc/6aa345f4496776569830. Corriger la valeur dépréciée de $media('gt-lg') à $mdMedia('gt-sm')

    2. https://github.com/angular/material/issues/1092

    InformationsquelleAutor jAYANT YADAV
  9. 0

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

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

    InformationsquelleAutor Manpreet
  10. 0
    <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

    InformationsquelleAutor Vesper
  11. 0

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

    InformationsquelleAutor cheesydoritosandkale
  12. 0

    Je n'ai pas essayer les autres bugs avec les directives mais j'ai utilisé cette simple css et a obtenu ce dont j'avais besoin. Toutes les corrections ou des conseils sur ce sujet css serait la bienvenue.

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