为什么core-list没有在core-header-panel中设置高度? [英] Why does core-list doesn't set a height within a core-header-panel?
问题描述
我试图将<core-list>
放入<core-header-panel>
中,但是直到我给它一个高度后,核心列表才会呈现.
I've tried to put a <core-list>
into a <core-header-panel>
but the core-list is not rendered until I give it a height.
所以我的示例代码确实可以解决非常愚蠢的问题,但是我认为必须有更好的方法适合核心列表到页面中.
So my example code does work with a very silly hack, but I think there must be better way to fit the core-list into the page.
结构如下:
这是我的代码:
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';
推荐答案
如此注释中所述,core-list需要一些帮助来适当调整大小:
As mentioned in this comment, core-list needs some help to be sized properly: https://github.com/Polymer/core-list/issues/47#issuecomment-63126241
我能够通过两个更改来修复您的jsfiddle:
I was able to fix your jsfiddle with two changes:
- 为内容div提供适合"的布局,因此它将填充hPanel中的整个剩余区域:
<div class="content" fit>
- 将列表的高度设为100%
<core-list id="list" height="120" style="height:100%;" >
进行了这些更改后,无需在javascript中设置列表的高度.
With these changes, setting height for the list in javascript is not necessary.
JSFiddle: http://jsfiddle.net/6ktwg9kk/
JSFiddle: http://jsfiddle.net/6ktwg9kk/
这篇关于为什么core-list没有在core-header-panel中设置高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!