[polymer-dev] Polymer Paper-Tab- Size according to content rather than fixed size

Sun, 14 Jun 2015 13:26:19 -0700 

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/a4e075b2-b611-464a-b282-af7abffd2ee9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to