paper-tabs icon indicating copy to clipboard operation
paper-tabs copied to clipboard

Need a way to specify tab alignment.

Open bicknellr opened this issue 10 years ago • 6 comments

There's currently no way to center tabs.

bicknellr avatar Nov 30 '15 23:11 bicknellr

There is a hack that I use. Use this CSS to center the tabs:

.paper-tabs-0 #tabsContainer.paper-tabs { -webkit-flex: 0; flex: 0; -webkit-flex-basis: auto; flex-basis: auto; margin: 0 auto; width: auto; }

#tabsContent.scrollable.paper-tabs { position: relative; }

KyleHorkley avatar Nov 30 '15 23:11 KyleHorkley

@KyleHorkley FYI, that's not going to work under native shadow.

ebidel avatar Nov 30 '15 23:11 ebidel

@KyleHorkley Glad you noticed this! Your post in the Polymer Google+ page is actually why I filed the issue.

bicknellr avatar Nov 30 '15 23:11 bicknellr

@ebidel Yeah, but it's a nice workaround for now.

KyleHorkley avatar Nov 30 '15 23:11 KyleHorkley

@bicknellr @ebidel Found a better way to accomplish this (and it should work in native shadow!). Simply add a div before and after paper-tabs with the class of flex. Credit to Matt Bogado on G+

KyleHorkley avatar Dec 04 '15 21:12 KyleHorkley

Adding flex class in a wrapper div did not help. The only way I could get the tabs to center was to change position:absolute in #tabContents to position:static. Since this style can't be overwritten due to shadow, can a property such as @apply(--paper-tabs-content) please be added to the #tabsContent and#tabsContent.scrollable styles in paper-tabs.html?

kpprogrammer avatar Feb 22 '16 19:02 kpprogrammer