CODEWITHSUNDEEP
csspolymerpolymer-1.0
Aravind
Aravind

Reputation: 423

paper-header-panel content div behaving erratically

I am doing a simple test of polymer 1.0 elements. In the paper-header-panel test, the content area elements are not visible or are moving over the paper-header div. The demo is here and the code is below. Why is the content text not being displayed?

<!DOCTYPE html>
<html>

  <head>
    <title>paper-header-panel demo</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  </head>

  <body class="fullbleed layout vertical" style="height: 100%">
      <paper-header-panel mode="waterfall" class="flex">
        <div class="paper-header" style="height: 60px;">I am the header</div>
        <div class="content fit">I am the content</div>
      </paper-header-panel>
  </body>

</html>

Upvotes: 2

Views: 1476

Answers (3)

Greg Neiheisel
Greg Neiheisel

Reputation: 590

Maybe add class="fit" to <paper-header-panel>?

Upvotes: 0

Erik H&#246;hmann
Erik H&#246;hmann

Reputation: 522

Add <link rel="import" href="bower_components/paper-styles/paper-styles.html"> and remove the style attribute out of the body:

<body class="fullbleed layout vertical">
  <paper-header-panel mode="waterfall" class="flex">
    <div class="paper-header" style="height: 60px;">I am the header</div>
    <div class="content fit">I am the content</div>
  </paper-header-panel>
</body>

Typically the paper-toolbar component is used inside the paper-header-panel which imports the paper-style for you.

Upvotes: 2

Neil John Ramal
Neil John Ramal

Reputation: 3734

Here might be your problem.

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

Try changing this to

<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">

The previous one contains only the layout mixins (which is actually the recommended one), while the latter contains the layout classes (along with the /deep/ selectors) that you seemed to be using.

Upvotes: 3

Related Questions