paper-core-header waterfall doesnt work polymer 0.9

Question

I have a new Polymer 0.9 project and want to use paper-header-panel. Everything works except the special modes of paper-header-panel, like waterfall.

What am I doing wrong?

I've tried setting the flex option on the body and paper-header-panel as suggested in the documentation, and the css settings but nothing works, unless I set paper-header-panel to a fixed height.

<html lang="">
    <head>
        <!--Polymer-->
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/iron-icon/iron-icon.html">
        <link rel="import" href="bower_components/iron-icons/iron-icons.html">
        <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
        <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">

        <!-- Page styles -->
        <style>
            body{
                height: 100%;
                width:100%;
                margin:0px;
                padding: 0px;
            }

            .contentHolder {
                height: 2000px;
            }

            paper-header-panel {
                height:100%;
                @apply(--shadow-elevation-2dp);
            }

            paper-toolbar {
                height: 60px;
                font-size: 25px;
                line-height: 60px;
                font-weight: 300;
                padding: 0 10px;
                color: #FFF;
                transition: height 0.2s;
            }

            paper-toolbar.medium-tall{
                line-height: 60px;
                font-size: 35px !important;
            }
        </style>
    </head>
    <body fullbleed layout vertical>
        <paper-header-panel flex mode="waterfall-tall" tall-class="medium-tall">
            <paper-toolbar class="toolbar">
                <div class="flex">Title</div>
                <iron-icon icon="search"></iron-icon>
                <iron-icon icon="menu"></iron-icon>
                <div class="middle"></div> 
            </paper-toolbar>
            <div class="contentHolder"></div>
        </paper-header-panel>
    </body>
</html>

Welcome to StackOverflow. Please post the relevant code here (instead of just a link to Github), and also tell us what you've tried. A link to JSFiddle would also be nice. — Pikamander2

Unknown Unknown · Accepted Answer · 2015-05-27T23:46:14

paper-header-panel

paper-header-panel contains a header section and a content panel section.

Important: The paper-header-panel will not display if its parent does not have a height. ...
https://github.com/PolymerElements/paper-header-panel#paper-header-panel

From your question

...unless I set paper-header-panel to a fixed height.

What this means is that the fixed height is required. However you can use the em css units to set the height relative to the font-size. 1em refers to 100% of the current font's height

paper-core-header waterfall doesnt work polymer 0.9

1 Answers

paper-header-panel