How can I align Polymer paper-tabs to the right

Question

I'm trying to build my new personal website right now, and to avoid using huge gobs of JS for what I'm planning, I'm trying to align the paper-tabs that form the site navigation to the right side of the screen, but still with a margin on the right. I can't really use CSS margins because the tabs would only look right on my screen. The site is at http://adueppen.github.io/ .

Answer 1

If you put an element with flex attribute in the toolbar, it will fill the space where it is inserted. You can use this to right-align your tabs, like so:

<core-toolbar class="tall animate">
  <span class="bottom" flex></span>
  <paper-tabs id="tabs" selected="0" class="bottom indent" style="width: 300px">
    <paper-tab name="home"><p>Home</p></paper-tab>
    <paper-tab name="projects" ><p>Projects</p></paper-tab>
    <paper-tab name="blog"><p>Blog</p></paper-tab>
    <paper-tab name="about"><p>About</p></paper-tab>
  </paper-tabs>
</core-toolbar>

Answer 2

Try wrapping the paper-tabs in <div horizontal end-justified layout style="width:100%"> .

Checkout this reference on using layout attributes .

Answer 3

In Polymer 1.6, the paper-toolbar is split with an element of class="title" .

The "title" element will be the last item on the left side, and the elements after it will be right-justified.

From the Polymer paper-toolbar demo:

<paper-toolbar>
  <paper-icon-button icon="menu"></paper-icon-button>
  <span class="title">Title</span>
  <paper-icon-button icon="refresh"></paper-icon-button>
  <paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>

If you don't want a title, just use a blank div :

<div class="title"></div>