Paper tabs not showing correctly in Dart Polymer app

Question

I am new to Dart and Polymer. I'm trying to create Tabs but they don't show correctly. Here is my code:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="scaffolded-by" content="https://github.com/google/stagehand">
  <title>Paper Tabs Events</title>

  <link rel="stylesheet" href="styles.css">

  <link rel="import" href="packages/polymer/polymer.html">
  <link rel="import" href="packages/paper_elements/roboto.html">

  <link rel="import" href="packages/core_elements/core_header_panel.html">
  <link rel="import" href="packages/core_elements/core_toolbar.html">
  <link rel="import" href="packages/core_elements/core_pages.html">

  <link rel="import" href="packages/paper_elements/paper_tabs.html">  
  <link rel="import" href="packages/paper_elements/paper_icon_button.html">
</head>

<body unresolved>
  <core-header-panel flex>
    <core-toolbar class="medium-tall">
      <paper-icon-button id="navicon" icon="dashboard"></paper-icon-button>
      <span flex>Main Heading</span>
      <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>

      <paper-tabs class="bottom fit" selected="1">
        <paper-tab>IMPORT</paper-tab>
        <paper-tab>DEFINE</paper-tab>
        <paper-tab>DESIGN</paper-tab>
        <paper-tab>DEVELOP</paper-tab>
        <paper-tab>DEPLOY</paper-tab>
        <paper-tab>EXPORT</paper-tab>
      </paper-tabs>
    </core-toolbar>

    <core-pages>
      <div><h1>Core Page</h1><p>This is content for core page.</p></div>
    </core-pages>
  </core-header-panel>

  <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>

Once they display correctly I then want to dynamically change the content under tabs on tab selection. But that is for later, first the tabs need to display correctly. Any help would be appreciated.

Here is the screenshot how it looks like.

https://www.dropbox.com/s/px2as8lor4a67ro/Screenshot%202015-04-23%2022.59.47.png?dl=0

What does "not showing correctly" mean exactly? What should be different? Maybe you can add a screenshot. — Günter Zöchbauer

Jake MacDonald Jake MacDonald · Accepted Answer · 2015-04-23T19:26:54

The parent element of your core-header-panel needs a height (in this case body).

See https://www.polymer-project.org/0.5/docs/elements/core-header-panel.html for more info.

TLDR; You can add "fullbleed layout vertical" as attributes to your body.

Paper tabs not showing correctly in Dart Polymer app

1 Answers