Полимерный основной список внутри основных страниц

Я только начинаю проект полимеров для создания веб-приложения. На этом сайте я использую <core-pages> для перемещения между различными контентом. Внутри одной страницы находится <core-list>, которая будет представлять собой представление мастер-детали. Но этот <core-list> пуст, потому что область просмотра имеет высоту 0. Может кто-нибудь сказать мне, как это исправить?Полимерный основной список внутри основных страниц

Вот код этой области:

<body fit > 
<template is="auto-binding"> 
<core-drawer-panel> 

    <core-header-panel drawer> 
    <core-toolbar id="navheader'"> 
     <span>Menü</span> 
    </core-toolbar> 
    <core-menu id="drawerMenu" selected="modules" selectedIndex="{{route}}" 
      valueattr="hash" excludedLocalNames="hr"> 
     <core-item icon="label" hash="modules">Module</core-item> 
     <core-item icon="question-answer" hash="credits">Über uns</core-item></div> 
     <hr> 
     <core-item icon="receipt" hash="impressum">Impressum</core-item> 
     <core-item icon="receipt" hash="privace_policy">Datenschutzerklärung</core-item> 
    </core-menu> 
    </core-header-panel> 

    <core-header-panel main> 
    <core-toolbar id="mainheader"> 
     <paper-icon-button 
     id="navicon" icon="menu"></paper-icon-button> 
     <span flex>Gruppenstunde</span> 
    </core-toolbar> 
    <core-pages selected="{{route}}" valueattr="hash" layout> 
     <div><modules-list hash="modules"></modules-list></div> 
     <div><page-credits hash="credits"></page-credits></div> 
     <div><page-impressum hash="impressum"></page-impressum></div> 
     <div><page-privacy-policy hash="privace_policy"></page-privacy-policy></div> 
    </core-pages>  
    </core-header-panel> 

</core-drawer-panel> 
</template> 
<script> 
    var template = document.querySelector('template'); 
    template.addEventListener('template-bound', function() { 
     var navicon = document.getElementById('navicon'); 
     var drawerPanel = document.querySelector('core-drawer-panel'); 
     navicon.addEventListener('click', function() { 
      drawerPanel.togglePanel(); 
     }); 
     var menu = document.querySelector('core-menu'); 
     menu.addEventListener('core-activate', function() { 
      drawerPanel.togglePanel(); 
     }); 
    }); 
</script> 

</body>

Внутри <modules-list> является core-list:

<paper-shadow z="1"></paper-shadow> 
<paper-fab icon="list" class="filter"></paper-fab> 
<paper-fab icon="add" class="add"></paper-fab> 
<core-ajax url="../includes/api/polymerGetModules.php" response="{{data}}" handleAs="json" auto></core-ajax> 
<core-list data="{{filteredData}}" extraItems="50" on-core-activate="{{moduleSelected}}" selection="{{selection}}" flex> 
    <template> 
     <div class="list-item {{selected?'selected':''}}"> 
      <h2>{{model.title}}</h2> 
     </div> 
    </template> 
</core-list>

источник

2014-11-18 Jokus

Просто добавьте атрибут макета fit к вашему <core-pages> элементу. Это будет абсолютно позиционировать ваш элемент, заполнив его первый позиционированный родитель.

источник

2014-11-18 19:52:02

Это отлично работает, но в этом случае полоса прокрутки находится внутри страницы, а не справа. Взгляните на эту страницу, где я принял ваши изменения: http://www.test.gruppenstunde.eu/stack2.php Любая идея, как изменить это? – Jokus

Это ваш собственный код, 'max-width' и' width: 90% 'на том же элементе. –

Вот что я не хочу менять. Есть ли возможность позиционировать полосу прокрутки на границе браузеров? – Jokus

Полимерный основной список внутри основных страниц

ответ

Смежные вопросы