Search code examples
htmlpolymerweb-component

Buggy paper-tabs in Polymer 1.0

I recently made the shift from Polymer 0.5 to 1.0 and one aesthetic problem I noticed right away was the behavior of clickable elements, especially paper-tabs and paper-button. When clicked, the text resizes in a weird and abrupt manner like so:

enter image description here

As you might've noticed, at one point I clicked the tab and it became active yet the bar underneath did not slide under it.

How can I get them to be more smoother and 'in place'? Like this:

enter image description here

Following is the code for the paper-tabs:

       <paper-toolbar id="mainToolbar" class="tall">
            <div class="top title flex">[[headerTitle]]</div>
            <my-tools class="top"></my-tools>
            <div class="bottom">
                <paper-tabs selected="[[selected]]" noink class="tabs">
                    <paper-tab id="discover"><a href="/">DISCOVER</a></paper-tab>
                    <paper-tab id="learn"><a href="/learn">LEARN</a></paper-tab>
                    <paper-tab id="explore"><a href="/explore">EXPLORE</a></paper-tab>
                </paper-tabs>
            </div>
        </paper-toolbar>
Solution

  • If you look at paper-tab.html, you can change:

    :host(:focus) .tab-content {
  opacity: 1;
  font-weight: 700;
}

    and remove the change in font-weight to:

    :host(:focus) .tab-content {
  opacity: 1;
}