search

googlearchive / paper-tabs

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

Invisible selection bar #37

Closed richiksc closed 9 years ago

richiksc commented 9 years ago

I have embedded paper-tabs in my app like this:

<core-toolbar class="tall">
  <!-- main toolbar content goes here -->
  <paper-tabs class="bottom fit" selected="0">
    <paper-tab>ONE</paper-tab>
    <paper-tab>ONE</paper-tab>
    <paper-tab>THREE</paper-tab>
  </paper-tabs>
</core-toolbar>

However, there is no selection bar under the first tab as expected. The selection bar only appears when the user taps on a tab other than the first one.

I have inspected the paper-tabs' Shadow DOM and have found that the selectionBar's width is set to 0.

Right now it only works when you manually set the selectionBar's width.

frankiefu commented 9 years ago

If you have paper-tabs in a container that is initially hidden and later becomes visible then you will have to call updateBar to update the size and position of the bottom bar. The general solution we have considered for this class of issues is detailed in Polymer/polymer#849.

richiksc commented 9 years ago

Ok, but i think this behavior should be default.

kevinpschaaf commented 9 years ago

Resolved via https://github.com/Polymer/polymer/issues/849 and https://github.com/Polymer/paper-tabs/commit/c0b70905af49d5b43a47f3829c08c02b7771d327. Calling updateBar manually is no longer required when used in containers that use the CoreResizer mixin.

richiksc commented 9 years ago

@kevinpschaaf Great! No need to call updateBar manually any more.