Search code examples
htmlcsspolymerweb-component

Variable Width for Polymer Paper Tabs

I want to implement the Polymer Paper Tabs, however I am struggling to find a way of having varying widths for the tabs.

I see that the scrollable tabs have the variable widths however I can not use these for my use case due to the scrolling arrows on display.

I have attempted to edit the CSS of the tabs by changing the widths manually however this changes all of the widths of the tabs.

Solution

  • If you set the scrollable attribute, it will make the widths of the tabs to be dynamic. You can also set the hideScrollButton attribute to prevent the arrows to be displayed.

    <paper-tabs selected="0" scrollable hide-scroll-button>