search

googlearchive / paper-tabs

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

Add default width #28

Closed robdodson closed 9 years ago

robdodson commented 9 years ago

This adds a default width of 100% to paper-tabs so they fill whatever container they're placed inside of. paper-tabs already has a default height, but no default width, and that can be a stumbling block for developers, especially those new to Polymer, who expect to see something when they use the tag. @frankiefu wdyt?

addyosmani commented 9 years ago

@robdodson I may be missing something. Without an explicit width: 100% in :host, paper-tabs currently renders fine both outside and inside other containers. Do you have an example of where this breaks? E.g

Renders as expected:

    <paper-tabs selected="0" noink nobar>
      <paper-tab>ITEM ONE</paper-tab>
      <paper-tab>ITEM TWO</paper-tab>
      <paper-tab>ITEM THREE</paper-tab>
    </paper-tabs>

Renders as expected respecting container dimensions:

  <div style="width:300px">
    <paper-tabs selected="0" noink nobar>
      <paper-tab>ITEM ONE</paper-tab>
      <paper-tab>ITEM TWO</paper-tab>
      <paper-tab>ITEM THREE</paper-tab>
    </paper-tabs>
  </div>
ebidel commented 9 years ago

paper-tabs is display: block so it'll take up its parent: http://jsbin.com/sonamo/1/edit

robdodson commented 9 years ago

Ah my bad, I wrote this late last night and didn't notice it was already display: block.

Where it doesn't work is inside of a core-toolbar: http://jsbin.com/jirumu/2/edit You have to either give it a flex attribute or width: 100%. Both are non-intuitive for new users.

ebidel commented 9 years ago

paper-tabs is also position: relative by default. Removing that or using <paper-tabs style="position:static"> fixes the case for core-toolbar. Not sure why it's position: relative. Maybe left over from the days of the canvas ink effect?

robdodson commented 9 years ago

If it doesn't break anything then removing position: relative may be the way to go. It'll streamline the tutorial a bit for sure

frankiefu commented 9 years ago

Removing position: relative will break other stuffs. I am in the process of making changes to paper-tabs to support scrollable tabs. It's going to use flex layout so it would work better inside a flex layout like core-toolbar. Planning to check that in sometimes next week.

robdodson commented 9 years ago

@frankiefu cool, so the plan is in the next iteration of paper-tabs I can just drop it into core-toolbar and it'll just appear?

frankiefu commented 9 years ago

yes, it will appear with min width. And just like other content you place inside the core-toolbar, you can then apply flex to make it flex.