search

googlearchive / core-scroll-header-panel

Fancy scrolling effects where the header animates between tall and condensed states
19 stars 16 forks source link

cant hide header panel properly.. #30

Open mwinters-stuff opened 9 years ago

mwinters-stuff commented 9 years ago

Having the toolbar part of the header panel so it dissapears on smaller width windows, when hidden=true on the toolbar, you could call core-scroll-header-panel.measureHeaderHeight() which would re-measure the height, BUT, as the height of the header is now zero, many of the if statements fail.. I would have expected that by setting the toolbar to hidden, or not would resize the content area..

here is an example called 'cat-toolbar'.

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="/bower_components/core-media-query/core-media-query.html">

<polymer-element name="cat-toolbar" attributes="bartitle, minvisiblewidth">
    <template>
      <style>
        :host{
          width: 100%;
          height: 100%;

        }
        .page-header {

          background-color: black;
          border-bottom: 7px #FFC627 solid;
          padding-left: 10px;
          height: 77px;

        }

        .page-header h1 {
          color: white;
          font-size: 22px;
          text-transform: uppercase;
          padding: 5px;
          white-space: nowrap;
        }

        core-scroll-header-panel {
          height: 100%;
        }

      </style>
      <core-media-query query="min-width: {{minvisiblewidth}}" queryMatches="{{showIt}}" on-core-media-change="{{onMediaQuery}}"></core-media-query>
      <core-scroll-header-panel id="tbar" >
          <core-toolbar  hidden?="{{!showIt}}"  class="page-header"  layout horizontal center fit>
            <h1 >{{bartitle}}</h1>
          </core-toolbar>
          <content>
          </content>
      </core-scroll-header-panel>

    </template>
    <script>
      Polymer('cat-toolbar',{
        onMediaQuery: function(event)
        {
          // this does not work for hidden tbar
          //this.$.tbar.measureHeaderHeight();

          // this works for hidden tbar.
          this.$.tbar.headerHeight = this.$.tbar.header.offsetHeight;
          this.$.tbar.headerMargin = this.$.tbar.headerHeight;
        },
      });
    </script>
</polymer-element>