问题
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.
Here is my 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>
If the dimension of the iron-list tag is defined, the list will be visible: See: https://goo.gl/photos/yBbM9jtndyAtKiBCA
Green and red (bottom) border of left and right content div is visible.
I tried to set flex and/or self-stretch to the iron-list tag without success.
Desired result: iron-list should use the full width and height of the (red) left content div.
回答1:
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>
The my-list-element looks like this:
<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>
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).
The important aspects of this are:
- 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).
Edit: 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.
回答2:
Solved (https://goo.gl/photos/J2Ua6phhVrYgLitE6):
<!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">
<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/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-list/iron-list.html">
<link rel="import" href="bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<style>
body, html {width:100%;height:100%;margin:0;padding:0;border:0;overflow-y: hidden;}
.scrolly {overflow-y: scroll;}
</style>
</head>
<body class="fullbleed layout vertical">
<dom-module id="my-list-element">
<style>
:host {
display: block;
height: 100%
}
iron-list {
height: 100%;
}
</style>
<template>
<iron-list items={{items}}>
<template>
<div class="primary dim">[[item.name]]</div>
</template>
</iron-list>
</template>
<script>
(function(){
Polymer({
is: 'my-list-element',
properties: {
items: {
type: Array,
value: []
}
},
ready: function() {
console.log('ready list');
for (var i=0; i< 100; i++) {
this.push('items', {name:'Test item ' + this.items.length });
}
}
});
})();
</script>
</dom-module>
<iron-pages>
<section class="layout vertical fit">
<div>title element that uses a varying amount of space<br>second header row</div>
<div class="horizontal layout ">
<div class="flex header-bg"><b>header left</b></div>
<div class="flex header-bg"><b>header right</b></div>
</div>
<div class="flex horizontal layout ">
<div class="flex header-bg scrolly"><my-list-element /></div>
<div class="flex header-bg scrolly"><my-list-element /></div>
</div>
<div class="horizontal layout ">
<div class="flex header-bg"><b>footer left</b></div>
<div class="flex header-bg"><b>footer right</b></div>
</div>
<div>Footer http://stackoverflow.com/questions/31964572/polymer-v1-0-iron-list-in-a-complex-flex-layout-is-not-visible</div>
</section>
</iron-pages>
</body>
</html>
来源：https://stackoverflow.com/questions/31964572/polymer-v1-0-iron-list-in-a-complex-flex-layout-is-not-visible