Handling polymer elements with different heights inside <core-pages>

Question

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>

Answer 1

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.

Answer 2

I've been having a similar struggle but with <core-animated-pages> inside a <core-header-panel> inside a <core-drawer-panel>.

I ended up getting the internal page element to fit and scroll itself by doing the following.

On the main page's css:

core-drawer-panel, core-header-panel {
    height: 100%;
}

core-animated-pages {    << core-pages for your example
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: 0;
    padding: 0;

    flex: 1;

    box-sizing: border-box;
}

On the polymer element's css:

:host {
    display: block;
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
}

Give it a go and let us know how it works.