处理不同高度的聚合物元素< core-pages> [英] Handling polymer elements with different heights inside <core-pages>

问题描述

我有一个< core-drawer-panel> ，里面有一个< core-pages> 元素在< core-header-panel main> 中。

< core -pages> 包含我定义的一组自定义元素，并且在任何时间点都只显示其中一个元素。然而，问题是，有些元素仅占用部分屏幕，但仍然垂直滚动。滚动量等于< core-pages> 中最高的元素。

预期的行为是该元素只有在超过其视口时才应滚动。我如何实现这种行为？

demo-students.html （剥离版本，使其更具可读性）

 < polymer-element name =students-dashboard> 
< template> 
< style> 
 ... 
< / style> 
 
 > 
< core-header-panel drawer mode =seamed> 
 ... 
< / core-header-panel> 
 
< core-header-panel main mode =seamed> 
< core-toolbar ...> 
< span flex>学生< / span> 
< / core-toolbar> 
 
< div class =content> 
 <！ -  
这需要滚动，它确实是
  - > 
< students-grid name =students>< / students-grid> 
 
 <！ -   -  
这个元素的内容很短，
但仍滚动到与
 相同的范围。元素
  - > 
< student-editor name =student_editor>< / students-editor> 
< / core-pages> 
< / div> 
< core-header-panel> 
< / core-drawer-panel> 
< / template> 
 
< script> 
 ... 
< / script> 
< / polymer-element> 
  

解决方案

我不知道这是否是同一个问题有：使用< core-pages> 时，它将超越滚动到较小标签的内容。每个页面的大小与最大的页面大小相同。

除了将< core-pages> 替换为< animated-core-pages> 这让问题奇迹般的消失了。

code>< core-scaffold> ，这与bowser（同一天）下载的版本不同。使用后者时BUG消失。

Tldr：也许初学者项目不是最新的。

< PS：这样可以解决页面大小问题，而不是页面上滚动位置的问题。

I have a <core-drawer-panel> and inside it is a <core-pages> element inside <core-header-panel main>.

<core-pages> contains a set of custom elements that I have defined and only one of those elements are shown at any point of time. However the problem is, there are elements that take only part of the screen but still scroll vertically. The amount of scrolling is equal to the tallest element within <core-pages>.

The expected behavior is that the element should scroll only if it exceeds it's view port. How can I achieve this behavior?

demo-students.html (Stripped down version, to make it more readable)

<polymer-element name="students-dashboard">
  <template>
    <style>
      …
    </style>

    <core-drawer-panel…>
      <core-header-panel drawer mode="seamed">
          …
      </core-header-panel>

      <core-header-panel main mode="seamed">
        <core-toolbar …>
          <span flex>Students</span>
        </core-toolbar>

        <div class="content">
          <core-pages selected={{getModule(route)}} valueattr="name">
            <!--
              This needs to scroll and it does
            -->
            <students-grid name="students"></students-grid>

            <!--
              The content of this element is short,
              but still scrolls to the same extent as the
              <students-grid> element
            -->
            <student-editor name="student_editor"></students-editor>
          </core-pages>
        </div>
      <core-header-panel>
    </core-drawer-panel>
  </template>

  <script>
    …
  </script>
</polymer-element>

解决方案

I don't know if it's the same issue I had: when using <core-pages> it was scrolling beyond the content of the smaller tabs. Each pages had the same size as the biggest page.

Nothing worked except replacing <core-pages> with <animated-core-pages> which made the problem magically disappear.

I had a similar problem with <core-scaffold> from the starter project which was different from the version downloaded by bowser (the same day). A bug disappeared when using the latter.

Tldr: Maybe the starter project is not up-to-date.

PS: this fixed the pages size problem not the fact that the scroll position is keeped across pages.

这篇关于处理不同高度的聚合物元素&lt; core-pages&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！