Changing header size

[jdepypere]

Having an issue in where I have a core-toolbar inside the core-scroll-header-panel. When changing the core-toolbar to being tall, the content height isn't adjusted. Using the core-header-panel this is adjusted corretly.

Aside from that, there's also issus with transparancy when toggling the tall attribute of the core-toolbar that's inside the core-scroll-header-panel.

You can see an example here. It loads the tall page first, and after clicking on the small-button you will see the content is floating after the core-toolbar and it will be the image instead of the regular color. If you scroll halfway on the tall-page (so that the header image is slightly transparent but still visible, not fully condensed) you notice that on the small-page the header is almost fully transparent.

[frankiefu]

If you change the header's height, you need to call measureHeaderHeight() to tell core-scroll-header-panel to measure the height again. This is important so it can do the correct scroll header effect.

pageChanged: function(){
  this.tall = this.page === 'tall';
  this.$.mainheader.classList.toggle('tall', this.tall);
  this.$.headerPanel.measureHeaderHeight();
},

Also you have condenses and keepCondensedHeader set on the core-scroll-header-panel. You probably want them to be removed when it's not in tall mode.

<core-scroll-header-panel main id="headerPanel" condenses="{{tall}}" keepCondensedHeader="{{tall}}">

jsbin: http://jsbin.com/rowucaza/1/edit

There is a bug in core-scroll-header-panel which it doesn't reset some of the styles on the bg so the above jsbin would not work correctly right now. We will try to fix it in the next release.

[jdepypere]

Thanks for the clarification, didn't see he measureHederHeight() method. In my specific case I do want to kaap the condenses and keepCondensedHeader. However, changing the value of condenses seems to bring other css issues (core-toolbar is semi white and buttons in my core-toolbar are under the core-toolbar, under where the pagename is displayed (this issue is also present in your code). However, when condenses is just set to true and not toggled (example), that issue isn't present, only the image transparency and the tall being tall when going there even though the page has already been scrolled down, however this last one might be a js issue.

Thanks for the quick response, will keep an eye out for the release notes of the next release(s)!

[frankiefu]

This jsbin shows how you can change between Tall and Small dynamically. http://jsbin.com/rowucaza/4/edit

[frankiefu]

Please re-open if this issue still exists.