Search code examples
csspolymerpositioningpaper-elementscustom-element

Positioning Elements inside Polymer paper-toolbar


By default the paper-toolbar element in polymer positions the Title and menu button to the left and the remaining elements to the right. Is it possible to position Elements in the centre of the paper-toolbar?

In my case i would like to centre a paper or iron-input to crete a search field. I am wondering if there is a simple trick to do this?

<paper-toolbar class="toolbar">
    <span class="title">Toolbar</span>
    <paper-input label="text input"></paper-input>
</paper-toolbar> 

Solution

  • I believe you can set the class of a tag to change its position in the paper-toolbar. Then the middleJustify property of the toolbar sets where you want tags with the class middle to be placed horizontally.

    <paper-toolbar class="toolbar" middle-justify="center">
         <span class="title">Toolbar</span>
         <paper-input class="middle" label="text input"></paper-input>
    </paper-toolbar>