Positioning buttons in menu header polymer -


how place paper-icon-buttonin right corner of application header ?
icon floats under title , it's not looking good. screenshot below screenshot of application

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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -