Few not very clean ways: If I remember correctly you have flex-1 to flex-12 to set ratio if you want to fiddle with it and mby even define few breakpoints in media query. Me personaly will not use flex for tabs, but mby I would define divs between them to be flex. <tab1> <div flex> <tab2> ... And add sections in case it take divs as another tabs for selector.
On Sunday, June 14, 2015 at 10:25:43 PM UTC+2, Darin Hensley wrote: > > Using paper-tabs in Polymer Elements, I need the tabs to size according to > the content...rather than a fixed tab horizontal length. Any suggestions? > Note: CSS attributes are not being applied to tabs since I took away the id > in the html. > > > <https://lh3.googleusercontent.com/-v9SN5bIPBIE/VX3inCIW2OI/AAAAAAAAB2s/c5emFXm1zWg/s1600/tcnt8.jpg> > > > <https://lh3.googleusercontent.com/-v9SN5bIPBIE/VX3inCIW2OI/AAAAAAAAB2s/c5emFXm1zWg/s1600/tcnt8.jpg> > > > <body unresolved> > > > <core-header-panel mode="scroll"> > <core-toolbar justify="end"> > <div flex disabled> > Title > </div> > <div horizontal layout> > <paper-tabs selected="0"> > <paper-tab flex auto center-center horizontal layout> > <div flex auto center-center horizontal layout> > ABOUT > </div> > </paper-tab> > <paper-tab> > <div flex auto center-center horizontal layout> > SCHEDULE > </div> > </paper-tab> > <paper-tab> > <div flex auto center-center horizontal layout> > VIDEOS > </div> > </paper-tab> > <paper-tab> > <div flex auto center-center horizontal layout> > HOST > </div> > </paper-tab> > <paper-tab> > <div flex auto center-center horizontal layout> > DONATIONS > </div> > </paper-tab> > </paper-tabs> > </div> > </core-toolbar> > </core-header-panel> > > > </body> > > > > > html,body { > height: 100%; > margin: 0; > background-color: #E5E5E5; > font-family: 'RobotoDraft', sans-serif; > } > core-header-panel { > height: 100%; > overflow: auto; > -webkit-overflow-scrolling: touch; > } > core-toolbar { > background: #03a9f4; > color: white; > } > #tabs { > width: 100%; > margin: 0; > -webkit-user-select: none; > -moz-user-select: none; > -ms-user-select: none; > user-select: none; > text-transform: uppercase; > } > .container { > width: 80%; > margin: 50px auto; > } > #tabs-content { > } > @media (min-width: 481px) { > #tabs { > width: 500px; > } > .container { > width: 400px; > } > } > > > > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1d26ea12-c8b7-4500-940b-b498e72b0021%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
