CODEWITHSUNDEEP
htmlcsspolymerpaper-elements
user568109
user568109

Reputation: 48003

How to make a paper-toolbar stay at bottom?

I am using Polymer paper elements. I need two toolbars for my page, one at top and other at bottom. How do I make the other one.

I have looked here for answer. But that is a core-toolbar and I am using v1.0. Still on using .bottom, the toolbar remains on top.

Thanks

Upvotes: 1

Views: 1778

Answers (2)

sfeast
sfeast

Reputation: 956

I like to use Flexbox for things like this. Here's an example with paper-header-panel:

<paper-header-panel>
  <paper-toolbar><span>Top Toolbar</span></paper-toolbar>
  <div class="layout vertical fit">
    <div class="layout flex">content</div>
    <paper-toolbar><span>Bottom Toolbar</span></paper-toolbar>
  </div>
</paper-header-panel>

Note that this is using iron-flex-layout & you should probably use the mixin version of layout styles instead of the classes directly as I've done here (i.e. @apply(--layout-vertical), etc) or use flexbox styles directly.

Upvotes: 2

Zikes
Zikes

Reputation: 5886

The .bottom in the paper-toolbar documentation is intended to align items within the toolbar. If you want to make the toolbar itself bottom aligned, you'll need to style the paper-toolbar element and its container.

Styles:

<style>
  .container {
    position: relative;
  }
  paper-toolbar.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

HTML:

<div class="container">
  <paper-toolbar></paper-toolbar>
  <paper-toolbar class="bottom"></paper-toolbar>
</div>

Upvotes: 0

Related Questions