web-dev-qa-db-fra.com

Angular Barre d'outils fixe du matériau ET pied de page collant

Je me bats la tête contre ce problème depuis un certain temps maintenant et j'ai en quelque sorte trouvé une solution. Je voudrais une barre d'outils fixe (barre de navigation) ainsi qu'un pied de page collant (flottant). Le pied de page doit flotter au bas de la section principale mais être collant au fond lorsqu'il n'y a pas de contenu. Il semble que je puisse faire l'un ou l'autre mais pas les deux. Avec cette méthode, la barre d'outils est fixe mais le pied de page n'est pas collant. Il aboutit à la barre d'outils lorsque la section principale est vide.

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>


    <md-content>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
            <div style="background-color: red;" flex></div>
            <div style="background-color:orange;color:white;" >footer item</div>
        </div>  
    </md-content>           
  </div>    
</body>

Le code ci-dessous fonctionne comme un pied de page collant mais la barre d'outils défile également.

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>

    <div layout="column" flex>
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
      <div style="background-color: red;" flex></div>
      <div style="background-color:orange;color:white;" >footer item</div>
    </div>  
  </div>    
</body>

Cela semble être la bonne façon de faire ce que j'essaie de faire, mais je ne peux pas le rendre parfait.

Outre cette méthode, j'ai également utilisé une approche plus traditionnelle de la mise en œuvre d'un pied de page collant en utilisant la hauteur de section principale calculée à partir de calc(100vh - header - footer). Je l'ai presque compris quand BAM .. angular-material a décidé de faire changer la taille de sa barre d'outils avec la taille de la fenêtre d'affichage. Je vais probablement faire une demande de changement afin que je puisse utiliser un espace remplissant <div flex></div> Dans la section md-content Mais je voulais d'abord savoir si quelqu'un avait une meilleure solution en premier.

angularjsflexboxangular-materialsticky-footer
12
Brian Baker

J'ai finalement compris quel était le problème. Lors de l'imbrication des divisions sous la partie de contenu principale de md-content un problème est survenu lors du safari. Je l'ai corrigé en ajoutant flex="none" à la div de niveau supérieur.

Cela ne fonctionne que sur Chrome:

<md-content layout="column" flex>
 <div flex layout="column">
  <section>
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">{{card.title}}
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>

Cela fonctionne sur Chrome et Safari:

<md-content layout="column" flex>
 <div flex layout="column">
  <section flex="none">
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">{{card.title}}
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>
14
Brian Baker

Tu devrais utiliser md-content comme wrapper de défilement, mettez votre contenu à l'intérieur avec flex et le pied de page avec flex="none". Il collera toujours au bas du md-content conteneur car qui a un CSS overflow: auto. enfants à disposition de matériaux angulaires

  <md-toolbar class="md-medium-tall">
    <div class="md-toolbar-tools">
      <span>HEADER</span>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
    </div>
  </md-toolbar>

  <md-content layout="column" flex>
    <div flex layout="column">
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
    </div>
    <footer flex="none" style="background-color:orange;color:white;">
      <div>footer item</div>
    </footer>
  </md-content>

codepen

4
kuhnroyal

Peut-être que cet extrait pourrait aider:

angular
  .module('myApp', ['ngMaterial'])
  .controller('MainCtrl', function($scope) {
    console.log('MainCtrl');
    $scope.cards = [{
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }];
    $scope.displayContent = true;
    $scope.displayLim = 100;
    $scope.toggleContent = function(showContent) {
      $scope.displayContent = showContent;
    };
  });
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body ng-app="myApp" ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>
    
    <md-content layout="row" flex>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
            <div style="background-color: red;" flex></div>
        </div>  
    </md-content>
    
    <div layout="row" class="footer" layout-align="center center">
      <h2>My Footer</h2>
    </div>
    
  </div>    
</body>
2
beaver