search

googlearchive / paper-tabs

A tabs à la Material Design
22 stars 21 forks source link

paper-tab link layout not working as expected #67

Open silkentrance opened 9 years ago

silkentrance commented 9 years ago

Using the following with Polymer 1.0.x, I find that the links will not be centered both vertically and horizontally as one would expect

<paper-tabs id="tabs">
<paper-tab link class="horizontal center-center layout"><a href="#one">One</a></paper-tab>
<paper-tab link class="horizontal center-center layout"><a href="#two">Two</a></paper-tab>
<paper-tab link class="horizontal center-center layout"><a href="#three">Three</a></paper-tab>
<paper-tab link class="horizontal center-center layout"><a href="#four">Four</a></paper-tab>
</paper-tabs>

(taken from the provided example, of course)

When inspecting the anchor element, I find that within paper-tab.html you specify that the height of the link must be 100%. Removing/Overriding that I managed to at least make it center vertically. However, it will not center horizontally unless you also add a text-align: center style to the stylesheet, e.g.

.tab-content.paper-tab > a {
  -ms-flex: 1 1 0.000000001px;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0.000000001px;
  flex-basis: 0.000000001px;
  text-align: center;
  text-decoration: none;
}

Removing the height property and adding text-align as depicted above will properly align the anchor. Optionally, you might want to add text-decoration: none to make this identical to a non link paper-tab.