Polymer Paper-Tab- Size according to content rather than fixed size

325 views

Skip to first unread message

Darin Hensley

unread,

Jun 14, 2015, 4:25:43 PM6/14/15

to polym...@googlegroups.com

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.




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

Robert Simon

unread,

Jun 16, 2015, 6:55:44 AM6/16/15

to polym...@googlegroups.com

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.

Reply all

Reply to author

Forward

0 new messages