search

googlearchive / paper-tabs

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

Scrollable paper-tabs not visible in core-toolbar #36

Open pawelstep opened 9 years ago

pawelstep commented 9 years ago

THe basic Polymer example works well. https://github.com/Polymer/polymer-tutorial/blob/master/step-1/index.html

But if you just replace self-end with scrollable, you can see the arrows, but not the content of tab items - their boxes exist somewehre, but the content is invisible. Short example based on the above (removed styles, added tabs), Chrome "Version 38.0.2125.111 m" :

``` Menu Item One Menu Item Two Menu Item three Menu Item Four Menu Item Five Menu Item six ```
pawelstep commented 9 years ago

THis one is working, the one failing replaces the paper-tabs line:

pawelstep commented 9 years ago

[Trying again - site removed the HTML]

' '

pawelstep commented 9 years ago

[ trying again - embrace the line with tag brackets ]

paper-tabs id="tabs" scrollable

frankiefu commented 9 years ago

It should probably use the natural width for this case. For now you can set flex or give the paper-tabs a width. e.g.

<paper-tabs selected="0" scrollable flex>

or 

<paper-tabs selected="0" scrollable style='width: 600px;'>
kristianmandrup commented 9 years ago

I haven't been able to make the scrollable tags work at all. The demos don't even work. Must be missing something? Just adding scrollable on a paper-tabs adds the arrows, but clicking them - nothing...

ghost commented 9 years ago

I too am facing this issue. Now that 0.5.2 is out it has supposedly fixed updating the width of paper-tabs by making it dynamic, so what could still be causing this?

RenaudF commented 9 years ago

Could we have some sort of flexible attribute that would make it expand to parent size? Otherwise it would default to wrap around its children. Or vice versa, it would be nice to have the option though.

At the moment any layout attribute set on the paper-tabs element itself is ignored by its inner tabsContainer which stubbornly remains flex. Perhaps wiring this container to inherit the parent layout parameters could work as well?

workaround:

domReady: function(){
    this.$.tabs.style.width = this.$.tabs.childNodes.array()
    .filter(function(d){ return d.tagName === 'PAPER-TAB' })
    .reduce(function(a,b){ return a+ (b.getBoundingClientRect().width) },0)+'px';
},