Question

从How to use core-scroll-header-panel with core-list跟进，我想将core-list放在core-animated-pages

中

我修改了jsbin中提供的Jeff Posnick his answer以添加core-animated-pages。见http://jsbin.com/xibile/1

不幸的是，core-animated-pages似乎忽略了它的孩子在决定它自己的体型时的大小。我可以通过将list-test的溢出更改为visible而不是hidden来解决此问题。请参阅http://jsbin.com/xibile/2（请注意，您需要在列表呈现之前调整窗口大小）

这个工作相当不错，但看起来像是黑客。在我介绍core-animated-pages之前，内容div优雅地增长以适应其子级的大小（list-test）。现在它没有，我只是通过溢出来消除它

如何让core-animated-pages的大小达到当前所选孩子的大小？

这似乎是asked before，但没有令人满意的答案。我希望在最新版本的核心元素中发生这种变化

此外，如果有人知道如何解决这个问题，那么你就不必调整窗口大小以使列表呈现出来也很棒。

Answer 1

在.content div中，尝试用list-test包裹session，然后您将再次拥有可分页列表。请参阅此jsbin。

<div class="content">
  <core-animated-pages id="pages" selected="0">
    <session>
      <list-test id="list" data="{{data}}"></list-test>
    </session>
  </core-animated-pages>
</div>

这就是原因。

在您使用list-test包裹core-animated-pages之前，.content div有一个absolute位置（padding-top所以它不会＃39;被core-scroll-header-panel的主标题覆盖，并list-test core-animated-pages正确显示。

现在您使用默认position relative的{{1}}打包它，您的列表就会崩溃。

修复很简单，将list-test与另一个session打包在一起。您甚至不需要将fit设为core-animated-pages，因为{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }会自动为其直接子项提供以下css -

core-list

希望这有帮助！

<强>更新

对于updateSize()呈现错误，您可能会在短暂的一天（50毫秒）之后远离重新调用t.addEventListener('template-bound', function () { var list = document.querySelector('list-test::shadow core-list'); // to update the size list.updateSize(); this.job('delay', function () { list.updateSize(); }, 50);，就像这样 -

{{1}}

这是另一个why。希望聚合物团队将来能解决这个问题！

如何将core-scroll-header-panel与core-animated-pages一起使用

1 个答案: