Scrollable paper-tabs not visible in core-toolbar

[pawelstep]

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" :

<core-toolbar>

    <paper-tabs id="tabs" >
        <paper-tab>Menu Item One</paper-tab>
        <paper-tab>Menu Item Two</paper-tab>
        <paper-tab>Menu Item three</paper-tab>
        <paper-tab>Menu Item Four</paper-tab>
        <paper-tab>Menu Item Five</paper-tab>
        <paper-tab>Menu Item six</paper-tab>
    </paper-tabs>

</core-toolbar>

<!-- main page content will go here -->

[pawelstep]

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

[pawelstep]

[Trying again - site removed the HTML]

' '

[pawelstep]

[ trying again - embrace the line with tag brackets ]

paper-tabs id="tabs" scrollable

[frankiefu]

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]

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...

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]

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';
},