scrollbar - Polymer core-scaffold nav core-menu does not scroll -
i have polymer core-scaffold looks 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, 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. have dozen items in menu, , if screen height insufficient, bottom ones cut off. have spent hours trying figure out how core-menu scroll no avail.
what's trick? missing?
you might use core-header-panel
element in order wrap menu. core-header-panel
manage scrolling you. put example on jsfiddle , code snipped here in order elaborate 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, 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>
Comments
Post a Comment