Why doesn't core-list set the height in the title bar?

Question

I tried putting <core-list> in <core-header-panel> , but the main list is not displayed until I draw its height.

So, my sample code really works with a very silly hack, but I think that there should be a better way to insert the main list into the page.

The structure is as follows:

Here is my code:

JSFiddle: http://jsfiddle.net/gu0g8kt3/2/

HTML

 <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html"> <link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html"> <core-drawer-panel> <core-header-panel drawer> <core-image style="width:256px; height:170px; background-color: lightgray;" sizing="cover" preload fade src="http://lorempixel.com/256/170/abstract/"></core-image> <core-menu selectedAttribute=""> <paper-item> <core-icon icon="assignment"></core-icon> <div>Option #1</div> </paper-item> <paper-item> <core-icon icon="account-circle"></core-icon> <div>Option #2</div> </paper-item> </core-menu> </core-header-panel> <core-header-panel id="hPanel" main> <core-toolbar id="toolbar"> <paper-menu-button icon="menu" core-drawer-toggle></paper-menu-button> <span flex>This is my app!</span> </core-toolbar> <div class="content"> <!-- here is the problem --> <core-list id="list" height="120"> <template> <div class="row {{ { selected: selected } | tokenList }}"> <div flex><core-image style="width:40px; height:40px; background-color: lightgray;" src="{{model.image_src}}" sizing="cover" preload></core-image></div> </div> </template> </core-list> <paper-fab class="fab" icon="add"></paper-fab> </div> </core-header-panel> </core-drawer-panel> 

CSS

 core-header-panel { background-color: #f9f9f9; } .fab { position: absolute; bottom: 16px; right: 16px; } /* main area content */ core-list { overflow: hidden; display: block; height: 200px; /* this is just a bad workaround, must be > 0 */ margin: 0 auto; } .row { background: lightblue; height: 120px; overflow: hidden; border-bottom: 1px #dedede solid; } .selected { background: orange; } /* drawer content */ core-toolbar { color: #2c2c2c; letter-spacing: 0.05em; text-shadow: 1px 1px 0px #d5d5d5, 2px 2px 0px rgba(0, 0, 0, 0.2); text-rendering: optimizeLegibility; } core-menu { margin: 0px; margin-top: -4px; } core-menu paper-item { border-bottom: 1px grey solid; } core-menu paper-item > div { padding-left: 10px !important; } 

Javascript

 var data = []; for (var i = 0; i < 10000; ++i) { data.push({ image_src: 'http://lorempixel.com/40/40/business/?' + Math.round(Math.random()*100) }); } document.querySelector('#list').data = data; // the only way it works for me is the following: var mainPanel = document.querySelector('#hPanel'); var toolbar = document.querySelector('#toolbar'); var list = document.querySelector('#list'); var contentHeight = mainPanel.clientHeight - toolbar.clientHeight; list.style.height = contentHeight + 'px'; 

Answer 1

As already mentioned in this comment, the main list needs some help to correctly determine: https://github.com/Polymer/core-list/issues/47#issuecomment-63126241

I was able to fix your jsfiddle with two changes:

• give a 'fit' layout for the content of the div, so it will fill the rest of the area in hPanel:

 <div class="content" fit> 

2. enter 100% of the height in the list

  <core-list id="list" height="120" style="height:100%;" > 

With these changes, the installation height for the list in javascript is not required.

JSFiddle: http://jsfiddle.net/6ktwg9kk/