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:
Anonimowy użytkownik

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

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

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;
};
});

<pre class="snippet-code-html lang-html prettyprint-override">
<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ę