1. घर
  2. सवाल और जवाब
  3. कोणीय सामग्री तय उपकरण पट्टी और चिपचिपा पाद लेख

कोणीय सामग्री तय उपकरण पट्टी और चिपचिपा पाद लेख

2016-01-11 10 views
11

मैं अब और तरह कुछ समय के लिए इस मुद्दे के खिलाफ मेरे सिर पिटाई की है का एक समाधान के साथ आया था। मुझे एक निश्चित टूलबार (navbar) के साथ ही एक चिपचिपा (फ्लोटिंग) पाद लेख चाहिए। पाद लेख मुख्य खंड के तल पर तैरना चाहिए, लेकिन जब कोई सामग्री नहीं है तो नीचे चिपचिपा रहना चाहिए। ऐसा लगता है कि मैं एक या दूसरे को कर सकता हूं लेकिन दोनों नहीं। इस विधि के साथ टूलबार तय किया गया है लेकिन पाद लेख चिपचिपा नहीं है। जब मुख्य अनुभाग खाली होता है तो यह टूलबार तक जाता है।कोणीय सामग्री तय उपकरण पट्टी और चिपचिपा पाद लेख

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

नीचे कोड चिपचिपा पाद लेख के रूप में काम करता है लेकिन फिर टूलबार स्क्रॉल भी काम करता है।

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

यह ऐसा करने के लिए उचित फ्लेक्स तरीका जैसा लगता है जो मैं करने की कोशिश कर रहा हूं लेकिन मैं इसे बिल्कुल सही नहीं कर सकता।

इस विधि इसके अलावा मैं भी एक चिपचिपा पाद लेख को लागू करने calc(100vh - header - footer) से गणना करने के लिए मुख्य धारा ऊंचाई का एक और अधिक परंपरागत दृष्टिकोण का इस्तेमाल किया है। मुझे लगभग बीएएम के बारे में पता चला था .. कोणीय-सामग्री ने व्यूपोर्ट आकार के साथ अपने टूलबार आकार को बदलने का फैसला किया। मैं शायद एक परिवर्तन अनुरोध में जा रहा हूं ताकि मैं अनुभाग में <div flex></div> भरने के अंतर का उपयोग कर सकूं लेकिन मैं यह जानना चाहता था कि किसी के पास पहले बेहतर समाधान है या नहीं।

स्रोत

2016-01-11 Brian Baker

उत्तर

13

मैं अंत में पता लगा कि क्या मुद्दा था। जब md-content मुख्य सामग्री भाग के तहत divs घोंसला बनाने से वहाँ सफारी पर एक मुद्दा था। मैंने शीर्ष स्तर div में flex="none" जोड़कर इसे ठीक किया।

यह केवल 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>

यह क्रोम और सफारी पर काम करता है:

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

स्रोत

2016-01-27 05:14:41

+0

आपको पर्याप्त रूप से ऊपर नहीं उठा सका। – creimers

+2

यहां आपके समाधान के लिए एक कोडपेन है: http: // codepen।io/creimers/pen/MewVOB – creimers

+0

यह सुनकर खुशी हुई .. –

2

हो सकता है कि इस स्निपेट मदद कर सकता है:

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>

स्रोत

2016-01-11 15:19:05 beaver

+0

जवाब के लिए धन्यवाद और यह बहुत करीब है। मैंने अपना जवाब संपादित कर लिया है क्योंकि मैं यह उल्लेख करना भूल गया था कि मैं चाहता हूं कि पाद लेख मुख्य सामग्री के नीचे तैर जाए। आपके उदाहरण में यह टूलबार की तरह तय किया गया है। –

4

आप पुस्तक आवरण के रूप में md-content का उपयोग करना चाहिए flex और flex="none" साथ पाद लेख के साथ अंदर अपनी सामग्री डाल दिया। यह हमेशा md-content कंटेनर के तल पर कायम होगा के बाद से है कि एक सीएसएस 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

स्रोत

2016-01-17 14:05:06 kuhnroyal

+1

(वैसे भी ios) डेस्कटॉप लेकिन मोबाइल पर इस मुद्दे को हल करती है कि यह स्क्रॉल व्यवहार टूट जाता है। यह स्क्रीन में फिट करने के लिए सामग्री divs का आकार बदलता है। जब मैं इसे ठीक करने के लिए एक न्यूनतम ऊंचाई निर्धारित करता हूं, तो पाद लेख सामग्री के मध्य में तय रहता है। यहां एक फोर्कड [कोडपेन] है (http://codepen.io/anon/pen/adLrLL)। इसे डेस्कटॉप पर और मोबाइल पर भी देखें। कोई विचार? –

+0

मैं मेरी कलम अपडेट किया गया लेकिन मुझे यकीन है कि अगर कुछ भी ठीक करता है नहीं कर रहा हूँ। आईओएस उपलब्ध एटीएम नहीं है। यह एंड्रॉइड क्रोम पर काम करता है। वर्तमान में आईओएस समस्याओं के बारे में कोणीय-सामग्री में खुले मुद्दे हैं। आप किस सफारी का उपयोग कर रहे हैं? – kuhnroyal

+1

मैं ऊपर उठाऊंगा क्योंकि इससे ज्यादातर इस मुद्दे को हल किया गया था। यह हो सकता है कि मेरा एकमात्र विकल्प गिथब पर बगफिक्स अनुरोध डालना है। –

संबंधित मुद्दे

 संबंधित मुद्दे