Barra degli strumenti angolare Materiale fisso e piè di pagina appiccicoso

Ho battuto la testa contro questo problema da un po 'di tempo e mi sono inventato una soluzione. Vorrei una barra degli strumenti fissa (barra di navigazione) e un piè di pagina appiccicoso (mobile). Il piè di pagina dovrebbe fluttuare nella parte inferiore della sezione principale ma essere appiccicoso al fondo quando non c'è alcun contenuto. Sembra che io possa fare l'uno o l'altro, ma non entrambi. Con questo metodo la barra degli strumenti è fissa ma il piè di pagina non è appiccicoso. Si arresta fino alla barra degli strumenti quando la sezione principale è vuota.Barra degli strumenti angolare Materiale fisso e piè di pagina appiccicoso

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

Il seguente codice funziona come un piè di pagina appiccicoso, ma viene eseguita anche la barra degli strumenti.

Questo sembra il modo corretto per realizzare ciò che sto cercando di fare, ma non riesco a farlo perfettamente.

Oltre a questo metodo, ho anche utilizzato un approccio più tradizionale per l'implementazione di un piè di pagina appiccicoso utilizzando l'altezza calcolata della sezione principale da calc(100vh - header - footer). Ho quasi capito quando BAM .. angular-material ha deciso di modificare le dimensioni della barra degli strumenti con le dimensioni della finestra. Probabilmente inserirò una richiesta di modifica in modo da poter utilizzare un intervallo di riempimento <div flex></div> nella sezione md-content ma volevo scoprire se qualcuno ha una soluzione migliore.

fonte

2016-01-11 Brian Baker

ho finalmente capito quale sia il problema era. Quando si nidificano le div sotto la parte del contenuto principale di md-content, si è verificato un problema in Safari. L'ho risolto aggiungendo flex="none" al livello di alto livello.

Questo funziona solo su 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>

Questo funziona su Chrome e 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>

fonte

2016-01-27 05:14:41

Non potresti invogliarti abbastanza. – creimers

Ecco una codepen per la soluzione: http: // codepen.io/creimers/pen/MewVOB – creimers

Felice di sentirlo aiutato .. –

Forse questo frammento potrebbe aiutare:

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>

fonte

2016-01-11 15:19:05 beaver

Grazie per la risposta e è molto vicino. Ho modificato la mia risposta perché ho dimenticato di dire che voglio che il piè di pagina galleggi nella parte inferiore del contenuto principale. Nel tuo esempio è fisso come la barra degli strumenti. –

Si dovrebbe usare md-content come involucro di scorrimento, inserire il contenuto all'interno con flex e il piè di pagina con flex="none". Rimarrà sempre sul fondo del contenitore md-content poiché ha un codice CSS overflow: auto. angular-material layout children

<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

fonte

2016-01-17 14:05:06 kuhnroyal

Questo risolve il problema sul desktop ma mobile (iOS in ogni caso) interrompe il comportamento di scorrimento. Ridimensiona il contenuto div per adattarsi allo schermo. Quando imposto un'altezza minima per risolverlo, il piè di pagina rimane fisso nel mezzo del contenuto. Ecco un biforcuto [codepen] (http://codepen.io/anon/pen/adLrLL). Visualizza sul desktop e sul cellulare. Qualche idea? –

Ho aggiornato la mia penna ma non sono sicuro se questo risolve qualsiasi cosa. Non ho ios disponibili atm. Funziona su Android Chrome. Al momento ci sono molti problemi aperti in materia angolare su problemi di ios. Quale Safari stai usando? – kuhnroyal

Venerò perché questo risolve principalmente il problema. Può darsi che la mia unica opzione sia quella di inserire una richiesta di bugfix su github. –

Barra degli strumenti angolare Materiale fisso e piè di pagina appiccicoso

risposta

Problemi correlati