CODEWITHSUNDEEP
csspolymer
flamusdiu
flamusdiu

Reputation: 1742

Using Polymer with paper-toolbar

Using the layout below. I haven't been able to get the avatar and logout buttons to the right side of the screen properly. It seems I can't seem to figure out how to set up the toolbar properly.

However, there is this problem on paper-toolbar github: Issue #6 is also a problem so I have to manually set the size of the tool bar as well instead of using the built in style.

<body class="fullbleed layout vertical">
    <paper-drawer-panel>
        <paper-header-panel drawer>
            <paper-toolbar>
                <div><img src="my-image.png"></div>
            </paper-toolbar>
            <paper-menu id="mainMenu">
                <paper-item>One</paper-item>
                <paper-item>Two</paper-item>
            </paper-menu>
        </paper-header-panel>
        <paper-header-panel main>
            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                <div>My Title</div>
                <img src="my-avatar.png" aria-label="avatar" title="avatar" width="64px" height="64px"/>
                <a href="/logout" aria-label="Logout" title="Logout">Logout</a>
            </paper-toolbar>
            <div id="content">My content/div>
        </paper-header-panel>
    </paper-drawer-panel>
    </body>

Note: I haven't had this work with any version of Polymer (including the newly release 1.0)

Upvotes: 0

Views: 1382

Answers (2)

Aravind
Aravind

Reputation: 423

Two things -

  1. <div class="flex">My Title</div>

  2. Add this in your <head> <link rel="import" href="bower_components/paper-styles/paper-styles.html">

Though the second might not be needed, as I believe paper-toolbar imports paper styles automatically.

Upvotes: 0

flamusdiu
flamusdiu

Reputation: 1742

I still not sure why it doesn't work but I started with Polymer Starter Kit and got a working toolbar. I can only figure that I setup a bad framework.

Upvotes: 1

Related Questions