Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

paper-tab link layout not working as expected #67

Open
silkentrance opened this issue Jun 6, 2015 · 0 comments
Open

paper-tab link layout not working as expected #67

silkentrance opened this issue Jun 6, 2015 · 0 comments

Comments

@silkentrance
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant