复杂的Flex布局中的聚合物V1.0铁清单不可见 [英] polymer V1.0 iron-list in a complex flex layout is not visible
问题描述
我正在使用Google的Polymer库，在(复杂的)flex布局中使用铁清单时遇到了麻烦.该列表未呈现.
I'm playing with Google's Polymer library and I have trouble with iron-list in a (complex) flex layout. The list is not rendered.
这是我的HTML:
<!doctype html>
<html>
<head>
<title>iron-list and flex layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:900">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<!--<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">-->
<!--<link rel="import" href="bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html">-->
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-list/iron-list.html">
<style is="custom-style">
* {font-family: Roboto}
body, html {width:100%;height:100%;margin:0;padding:0;border:0;overflow-y: hidden;}
.header {height: 50px;}
.footer {height: 30px;}
.header-bg {background: #f4f4f4;}
</style>
</head>
<body unresolved class="flex vertical layout self-stretch">
<template is="dom-bind">
<iron-ajax id="get_filltext_ajax" auto
url="//www.filltext.com/"
params='{"rows": "100", "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
"city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "integer": "{number|100}",
"business": "{business}", "index": "{index}"}'
handle-as="json"
loading="{{loading}}"
last-response="{{people}}">
</iron-ajax>
<div class="header header-bg">header</div>
<div class="vertical layout flex">
<div class="horizontal layout ">
<div class="flex header-bg">header left</div>
<div class="flex header-bg">header right</div>
</div>
<div class="horizontal layout flex self-stretch">
<div class="flex horizontal layout" style="border: solid 2px #00e034;">
<!-- content left-->
<!--<iron-list items="[[people]]" as="item" style="height:500px;width:300px;">-->
<iron-list items="[[people]]" as="item" class="self-stretch">
<template>
<div>
<div class="item">
<div class="primary dim">[[item.index]]</div>
<div class="pad">
<div class="primary"><span>[[item.fname]]</span> <span>[[item.lname]]</span></div>
<div class="secondary"><span>[[item.address]]</span> <span>[[item.city]]</span></div>
<div class="secondary"><span>[[item.city]]</span>, <span>[[item.state]]</span> <span>[[item.zip]]</span></div>
<div class="secondary dim">[[item.business]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</div>
<div class="flex" style="border: solid 2px #e00034;">content right</div>
</div>
<div class="horizontal layout header-bg">
<div class="flex self-end">footer left</div>
<div class="flex self-end">footer right</div>
</div>
</div>
<div class="footer header-bg">
<paper-button>Footer</paper-button>
</div>
</template>
</body>
</html>
如果定义了铁标标签的尺寸，则该列表将可见: 请参阅: https://goo.gl/photos/yBbM9jtndyAtKiBCA
If the dimension of the iron-list tag is defined, the list will be visible: See: https://goo.gl/photos/yBbM9jtndyAtKiBCA
左右内容div的绿色和红色(底部)边框是可见的.
Green and red (bottom) border of left and right content div is visible.
我试图将flex和/或self-stretch设置为Iron-list标签，但没有成功.
I tried to set flex and/or self-stretch to the iron-list tag without success.
期望的结果:Iron-list应该使用(红色)左侧内容div的完整宽度和高度.
Desired result: iron-list should use the full width and height of the (red) left content div.
推荐答案
我设法获得了一个聚合物元素包含的铁列表，以填充整个屏幕/浏览器大小的铁页面部分并在该边界内滚动(即而不是溢出并导致该部分本身滚动).顶级html看起来像这样:
I managed to get an iron-list contained by a polymer element to fill an entire screen/browser sized iron-page section and to scroll within that boundry (i.e. rather than overflowing and causing the section itself to scroll). The top level html looks like this:
<body class="fullbleed layout vertical">
<iron-pages>
<section class="layout vertical fit">
<div>title element that uses a varying amount of space</div>
<div class="flex">
<my-list-element/>
</div>
</section>
</iron-pages>
</body>
我的列表元素如下:
<dom-module id="my-list-element">
<style>
:host {
display: block;
height: 100%
}
iron-list {
height: 100%;
}
</style>
<template>
<iron-list items={{whatever}}>
<template>
.... etc ....
</template>
</iron-list>
</template>
</dom-module>
这将导致填充整个屏幕，并且铁列表在包含my-list-template实例的div中滚动.这是我发现完成此任务的唯一方法.其他所有情况都导致列表溢出页面，因此整个页面都滚动了(我不想要).
This causes the to fill the screen, and the iron-list scrolls in the div that contains the my-list-template instance. This is the only way I found to accomplish this. Everything else caused the list to overflow the page and therefore the entire page scrolled (which I didn't want).
重要的方面是:
- 该部分的 fit 样式.
- 包含my-list-element的div上的 flex 样式. 您可以在元素中看到的
- 两种高度均为100％的 height 样式(在元素本身及其包含的铁表上).
- The fit style on the section.
- The flex style on the div that contains my-list-element.
- Both 100% height styles that you see in the element (on the element itself and on its contained iron-list).
在Chrome 43中，整个部分都会滚动.在Chromium 39(我在其中测试了原始图像)中，它在div中滚动.无论哪种方式，都会显示铁清单.如果要弄清楚如何在flex div的边界内滚动，我会进行更新.
In Chrome 43 the entire section scrolls. In Chromium 39 (where I tested original) it scrolled in the div. Either way, the iron-list is displayed. I'll update if I sort out how to get it scrolling in the the boundary of flexed div.
这篇关于复杂的Flex布局中的聚合物V1.0铁清单不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
