CODEWITHSUNDEEP
polymer
dman
dman

Reputation: 11073

Polymer 1.0 Paper-Tabs Are Not Responsive To Content

Using Polymer 1.0, the paper-tab elements are not responsive to the size of their content/titles. Instead, all the tabs are a fixed size and it looks bad. From what I can tell, the default behavior is for them to be responsive to the title.

<!doctype html>
<html>

<head>

  <title>unquote</title>

  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
  <paper-header-panel>
    <paper-toolbar>
        <paper-tabs>
          <paper-tab>
              ABOUT
          </paper-tab>
          <paper-tab>
            <div>
              TOUR SCHEDULE
            </div>
          </paper-tab>
            <paper-tab>
              <div> 
                VIDEOS
              </div>
            </paper-tab>
            <paper-tab>
              <div> 
                HOST
              </div>
            </paper-tab>
            <paper-tab>
              <div> 
                LONG TITLE THIS IS
              </div>
            </paper-tab>
        </paper-tabs>
    </paper-toolbar>
  </paper-header-panel>
</body>
</script>
</html>

enter image description here

Upvotes: 1

Views: 857

Answers (2)

Scott Miles
Scott Miles

Reputation: 11027

If you want the tabs to fit to their content, you can override the default tab flexing:

<style is="custom-style">
  paper-tab {
    flex: none;
  }
</style>

http://jsbin.com/bizoso/edit?html,output

If you want the tabs to fill the toolbar, you can class="flex" to paper-tabs.

  <paper-tabs class="flex">

http://jsbin.com/xevepi/edit?html,output

Upvotes: 2

Kyle Horkley
Kyle Horkley

Reputation: 1011

Try importing iron-flex-layout (make sure it's in your bower_components folder!) and using the selected and flex attributes like so:

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
...
<paper-tabs scrollable flex>
    <paper-tab>
        ...
    </paper-tab>
</paper-tabs>

Upvotes: 0

Related Questions