Kağıt-sekmelerde polimer çekirdek listesinde% 100 yükseklik nasıl ayarlanır

Question

Polimerde <paper-tabs> ürününe yerleştirilen core-list öğesinde% 100 yükseklik yapmaya çalışıyorum. Ne yazık ki, bu bağlantıdan StackOverflow Height on Core-list yorum ile sorunumu çözmeyi denediğimde çekirdek listem 80px yükseklik alır ve daha büyük bir değer ayarlayamıyorum. Aşağıda

Kodum: Aşağıda, kod

<polymer-element name="progress-page" attributes="hash"> 
    <template> 
     <link rel="stylesheet" href="../assets/css/styles.css"> 
     <link rel="stylesheet" href="../assets/css/menu-card.css"> 
    <sidebar-layout selected="main-page"> 
     <div class="title">Report</div> 
     <div class="page-holder" horizontal layout center center-justified> 
      <div class="page-sub-title">Progress</div> 
     </div> 


     <paper-tabs selected="{{selected}}"> 
      <paper-tab>Tab 1</paper-tab> 
      <paper-tab>Tab 2</paper-tab> 
     </paper-tabs> 

     <core-pages selected="{{selected}}"> 
      <div> 
       <div class="content" fit style="overflow:auto;"> 
        <core-list data="{{data}}" fit height="120" style=" height: 100%;"> 
         <template> 
          <div class="row" layout horizontal center> 
           <div data-index="{{index}}">{{model.name}}</div> 
          </div> 
         </template> 
        </core-list> 
       </div> 
      </div> 

       <div> 
        Page 2 qasdasd 
       </div> 
     </core-pages> 


    </sidebar-layout> 


</template> 

<script> 
    Polymer('progress-page', { 
     ready: function() { 
      this.selected = 0; 
      this.data = generateContacts(); 

      function generateContacts() { 
       var data = []; 
       for (var i = 0; i < 1000; i++) { 
        data.push({ 
         name: 'dddd', 
         string: 'asd' 
        }); 
       } 
       return data; 
      }; 
     } 
    }); 
</script> 

Ben ikinci çözüm çalıştı ve bu hala çalışmıyor. Çekirdek listesini görmek için piksel cinsinden yükseklik yapmalıyım, birileri bana yardım edebilir mi?

<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html"> 
<link rel="import" href="../bower_components/core-list/core-list.html"> 
<link rel="import" href="../bower_components/core-pages/core-pages.html"> 
<link rel="import" href="../bower_components/core-ajax/core-ajax.html"> 
<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html"> 
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html"> 


<polymer-element name="progress-page" attributes="hash"> 
    <template> 
     <style> 
      :host { 
       display: block; 
       height: 100%; 
      } 
      core-list .row { 
       height: 90px; 
       padding: 15px; 
      } 
     </style> 
     <link rel="stylesheet" href="../../assets/css/styles.css"> 
     <link rel="stylesheet" href="../../assets/css/menu-card.css"> 
     <sidebar-layout selected="main-page"> 
      <div class="title">Report</div> 
      <div class="page-holder" horizontal layout center center-justified> 
       <div class="page-sub-title">Progress</div> 
      </div> 
      <div class="page-holder" horizontal layout center center-justified> 
       <section layout vertical is="auto-binding"> 
        <paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout> 
         <paper-tab inline flex center-center horizontal layout active>Terazniejszy miesiac</paper-tab> 
         <paper-tab inline flex center-center horizontal layout>Archiwum</paper-tab> 
        </paper-tabs> 
        <core-animated-pages selected="{{ selected }}" selectedindex="0" notap> 
         <section active one fit layout style="height:auto;"> 
          <list-test layout vertical> 
          <div class="page-holder" horizontal layout center center-justified> 
           <p class="progress-title">Summary</p> 


          </div> 

          <div class="page-holder" horizontal layout center center-justified> 
           <div class="page-holder progress-sumarry-color " horizontal layout center 
            center-justified> 
            <div>Month</div> 
            <div flex>+ x persons</div> 
            <div>+ x points</div> 
           </div> 
          </div> 


          <core-list id="app" data="{{data}}" height="80" style="will-change: transform; overflow-y: auto;height:1000px;"> 
           <template> 
            <div class="row"> 
             List row: {{index}}, User data from model: {{model.name}} 
             <input type="checkbox" checked="{{model.checked}}"> 
            </div> 
           </template> 
          </core-list> 





          </list-test> 
         </section> 
         <section one flex horizontal layout> 

         </section> 

        </core-animated-pages> 
       </section> 
      </div> 
     </sidebar-layout> 
    </template> 

    <script> 
     Polymer('progress-page', { 
        ready: function() { 
         selected: 0; 
         var app = this.shadowRoot.getElementById("app"); 
         app.data = generateContacts(); 
         var template = this.shadowRoot.getElementById("templ"); 

         function generateContacts() { 
          var data = []; 
          for (var i = 0; i < 88; i++) { 
           data.push({ 
            name: 'dddd', 
            string: 'asd', 
            cardID: 'icard-' + Math.floor(Math.random() * (1000 - 1 + 1) + 1) 
           }); 
          } 
          return data; 
         }; 
        }, 
        handleResponse: function (oldValue) { 
         if (this.response == 1) { 

         } 
         else { 
          window.localStorage.setItem("hash", ''); 
          document.querySelector('app-router').go('/login?error=tokenTimeout'); 
         } 


        }, 
       } 
     ); 
    </script> 
</polymer-element> 
<progress-page></progress-page> 

Answer 1

Çekirdek listeniz, çekirdek sayfalar altında div öğesi olan seçili bir sayfa olan ana öğeye uygundur. Ebeveyne doğru boyutu ayarladığınızdan emin olun.

Answer 2

bu css ile deneyin:

:host { 
    display: block; 
    height: 100vh; 
} 

vh hakkında daha fazla bilgi için buradan okuyabilirsiniz: VH & co. CSS

Answer 3

Tyhoan haklı, üst öğelerinin boyutunu kontrol etmelisiniz. İşe yaramıyor

<div class="page-holder" horizontal layout center center-justified style="height:100%;"> 
      <section layout vertical is="auto-binding" style="height:100%;"> 

       <paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout> 
        <paper-tab inline flex center-center horizontal layout active>Terazniejszy miesiac</paper-tab> 
        <paper-tab inline flex center-center horizontal layout>Archiwum</paper-tab> 
       </paper-tabs> 

       <core-animated-pages selected="{{ selected }}" selectedindex="0" notap style="height:100%;"> 
        <section active one fit layout vertical> 

         <div class="page-holder" horizontal layout center center-justified> 
          <p class="progress-title">Summary</p> 
         </div> 

         <div class="page-holder" horizontal layout center center-justified> 
          <div class="page-holder progress-sumarry-color " horizontal layout center 
           center-justified> 
           <div>Month</div> 
           <div flex>+ x persons</div> 
           <div>+ x points</div> 
          </div> 
         </div> 
         <div style="height:100%;"> 
         <core-list id="app" data="{{data}}" style="height:100%;"> 
          <template> 
           <div class="row"> 
            List row: {{index}}, User data from model: {{model.name}} 
            <input type="checkbox" checked="{{model.checked}}"> 
           </div> 
          </template> 
         </core-list> 
         </div> 

        </section> 
        <section one flex horizontal layout> 

        </section> 

       </core-animated-pages> 
      </section> 
     </div>