Naprawiono pasek narzędzi Angular Material ORAZ lepką stopkę

Od jakiegoś czasu walę głową w ten problem i znalazłem rozwiązanie. Chciałbym mieć stały pasek narzędzi (pasek nawigacyjny) oraz lepką (pływającą) stopkę. Stopka powinna unosić się na dole głównej sekcji, ale powinna być lepka, gdy nie ma treści. Wygląda na to, że mogę zrobić jedną lub drugą rzecz, ale nie obie. W przypadku tej metody pasek narzędzi jest naprawiony, ale stopka nie jest lepka. Jest dołączany do paska narzędzi, gdy sekcja główna jest pusta.

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

 

 </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 style="background-color: red;" flex>

 <div style="background-color:orange;color:white;" >footer item

  

 </md-content> 

  

</body>

Poniższy kod działa jak lepka stopka, ale pasek narzędzi również jest przewijany.

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

 

 </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 style="background-color: red;" flex>

 <div style="background-color:orange;color:white;" >footer item

  

  

</body>

Wydaje się, że jest to właściwy, elastyczny sposób na osiągnięcie tego, co próbuję zrobić, ale po prostu nie mogę tego zrobić idealnie.
Oprócz tej metody przyjąłem również bardziej tradycyjne podejście polegające na implementacji lepkiej stopki przy użyciu obliczonej wysokości sekcji bazowej z

calc (100vh - header - footer)

. Prawie się zorientowałem, kiedy BAM .. angular-material zdecydował się zmienić rozmiar paska narzędzi wraz z rozmiarem rzutni. Prawdopodobnie mam zamiar przesłać żądanie zmiany, aby użyć spacji wypełniającej

& < div flex & > & </div & >

w

md-content

, ale najpierw chciałem wiedzieć, czy ktoś ma lepsze rozwiązanie.

Zaproszony:

3 odpowiedzi

Anonimowy użytkownik

Potwierdzenie od:

Wreszcie zrozumiałem, o co chodzi. Wystąpił problem z safari podczas zagnieżdżania elementów div w głównej części

md-content

. Naprawiłem to, dodając

flex = "none"

do div najwyższego poziomu.
Działa to tylko w 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}}

 

 </section>

 <div flex>

 <footer flex="none" style="background-color:orange;color:white;">

 <div>footer item

 </footer>

 

</md-content>

Działa to w Chrome i 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}}

 

 </section>

 <div flex>

 <footer flex="none" style="background-color:orange;color:white;">

 <div>footer item

 </footer>

 

</md-content>

Anonimowy użytkownik

Potwierdzenie od:

Musisz użyć

md-content

jako wrappera przewijania, umieścić zawartość wewnątrz za pomocą

flex

i stopki z

flex = "none"

. Ponieważ tak jest, zawsze będzie przyklejać się do dolnej części kontenera

md-content

elementy podrzędne układu

overflow: auto

CSS. materiał kątowy
https://material.angularjs.org ... ldren

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

 

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

 

 <footer flex="none" style="background-color:orange;color:white;">

 <div>footer item

 </footer>

 </md-content>

Witryna CodePen
http://codepen.io/kuhnroyal/pen/YwrdLx

Anonimowy użytkownik

Potwierdzenie od:

Może ten fragment może pomóc:
<div class="snippet-code">
<div class="snippet" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

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>

 

 </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 style="background-color: red;" flex>

  

 </md-content>

 

 <div layout="row" class="footer" layout-align="center center">

 [b]My Footer[/b]>

 

 

  

</body>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

Naprawiono pasek narzędzi Angular Material ORAZ lepką stopkę

3 odpowiedzi

Powiązane pytanie

Stan problemu

Naprawiono pasek narzędzi Angular Material ORAZ lepką stopkę

Linki dotyczące treści

3 odpowiedzi

Powiązane pytanie

Stan problemu