CODEWITHSUNDEEP
javascripthtmlcsspolymer
Alex Dueppen
Alex Dueppen

Reputation: 112

How can I align Polymer paper-tabs to the right

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/.

Upvotes: 1

Views: 3993

Answers (3)

Joel H.
Joel H.

Reputation: 2784

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:

enter image description here

<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>

Upvotes: 0

Scott Miles
Scott Miles

Reputation: 11027

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>

Upvotes: 2

kctang
kctang

Reputation: 11202

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

Checkout this reference on using layout attributes.

Upvotes: 0

Related Questions