Positioning buttons in menu header polymer -
how place paper-icon-button
in right corner of application header ?
icon floats under title , it's not looking good. screenshot below
my element code:
<polymer-element name="sidebar-layout" attributes="selected" noscript> <template> <link rel="stylesheet" href="/assets/css/sidebar-layout.css"> <core-scaffold> <core-header-panel navigation flex mode="seamed"> <core-toolbar>menu</core-toolbar> <core menu theme="core-light-theme"> <core-item icon="info-outline" label="notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item> <core-item icon="key" label="logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item> <core-item icon="key" label="pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item> </core> </core-header-panel> <div tool> <content select=".title"></content> <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button> </div> <div class="content"> <content></content> </div> </core-scaffold> </template> </polymer-element>
though can using css pretty nicely here's workaround makes more semantic sense, adding flex
attribute <content>
element or <span>
tag have dont below.
<polymer-element name="sidebar-layout" attributes="selected" noscript> <template> <link rel="stylesheet" href="/assets/css/sidebar-layout.css"> <core-scaffold> <core-header-panel navigation flex mode="seamed"> <core-toolbar>menu</core-toolbar> <core menu theme="core-light-theme"> <core-item icon="info-outline" label="notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item> <core-item icon="key" label="logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item> <core-item icon="key" label="pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item> </core> </core-header-panel> <div tool> <content select=".title"></content> <span flex></span> <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button> </div> <div class="content"> <content></content> </div> </core-scaffold> </template> </polymer-element>
this <span>
tag flex
attribute takes amount of space lets icon fit in far right.
more flex
attribute at:
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
https://www.polymer-project.org/0.5/docs/elements/layout-elements.html
Comments
Post a Comment