我正在使用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/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/" 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>如果定义了铁标标签的尺寸，则该列表将可见: 请参阅: goo.gl/photos/yBbM9jtndyAtKiBCA
If the dimension of the iron-list tag is defined, the list will be visible: See: 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).
重要的方面是:
在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铁清单不可见
发布评论