Polymer core-scaffold nav core-menu does not scroll

Question

I have a polymer core-scaffold that looks like this:

<core-scaffold id="scaffold">
  <nav>
    <core-toolbar>
      <div>Menu</div>
    </core-toolbar>
    <core-menu valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
               on-core-select="{{menuItemSelected}}">
        <template repeat="{{page, i in pages}}">
          <paper-item hash="{{page.hash}}" noink style="color: #{{page.hash}}">
            <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>
            <a href="#{{page.hash}}">{{page.label}}</a>
          </paper-item>
        </template>
    </core-menu>
  </nav>
  ...
</core-scaffold>

Everything works beautifully. Drawer pops out, etc. But I have a dozen items in the menu, and if the screen height is insufficient, then the bottom ones are cut off. I have spent hours trying to figure out how to get just the core-menu to scroll to no avail.

What's the trick? What am I missing?

zunder zunder · Accepted Answer · 2014-12-18T21:49:47

You might use the core-header-panel element in order to wrap your menu. core-header-panel will manage the scrolling for you. I put your example on jsfiddle and a code snipped here in order to elaborate the usage:

http://jsfiddle.net/kreide/wh92b8bo/

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">

<polymer-element name="my-element" constructor="" attributes="">
    <template>
        <core-scaffold id="scaffold">
            <core-header-panel navigation flex mode="seamed">
                    <core-toolbar>
                        <div>Menu</div>
                    </core-toolbar>
                    <div class="content">
                        <core-menu valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
                               on-core-select="{{menuItemSelected}}">
                            <template repeat="{{page, i in pages}}">
                                <paper-item hash="{{page.hash}}" noink style="color: #{{page.hash}}">
                                    <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>
                                    <a href="#{{page.hash}}">{{page.label}}</a>
                                </paper-item>
                            </template>
                        </core-menu>                        
                    </div>
            </core-header-panel>
            <div tool>Title</div>
            <div>Main content goes here...</div>
        </core-scaffold>
    </template>
    <script>
        Polymer('my-element', {
            pages: [{label: '1', hash: "D6E3F2"},
                {label: '2', hash: "D6E3F2"},
                {label: '3', hash: "D6E3F2"},
                {label: '4', hash: "D6E3F2"},
                {label: '5', hash: "D6E3F2"},
                {label: '6', hash: "D6E3F2"},
                {label: '7', hash: "D6E3F2"},
                {label: '8', hash: "D6E3F2"},
                {label: '9', hash: "D6E3F2"},
                {label: '10', hash: "D6E3F2"},
                {label: '11', hash: "D6E3F2"}]
        });
    </script>
</polymer-element>

<my-element></my-element>

Polymer core-scaffold nav core-menu does not scroll

1 Answers