Dangling md-subheader and md-toolbar

[nobarany]

When a md-toolbar with md-scroll-shrink shrinks, the following subheader or md-toolbar doesn't move up to the top of the page, and it just dangles in the middle.
This codepen shows the problem for subheader, which appears only in Chrome (related to issues #1647 and #1726):
http://codepen.io/anon/pen/rVeaaL

But the problem with a second toolbar happens in Firefox as well:
http://codepen.io/anon/pen/QbNwQj

Interestingly, by adding md-scroll-shrink to the second toolbar you can achieve the behavior that you'd expect from the above code (i.e., the second one doesn't shrink).
http://codepen.io/anon/pen/MwyYvj

[topherfangio]

@nobarany Recent updates to Angular Material (and Bower-Material) may already solve this issue. When you have a chance, can you use the latest code in master and confirm if the issue is resolved If not, please provide a CodePen demo that will ensure we validate fixes that also match your needs.

[topherfangio]

Can you please provide a demo using the latest master code about exactly what you are attempting to accomplish?

I believe your first issue has been addresses, but I'm not exactly sure what you're wanting your second and third demos to do.

[nobarany]

Yes, the first one works now, thanks! In the second demo, there are two toolbars: the first one is supposed to shrink as user scrolls down and the second one is supposed to stick to the top of the page. It still doesn't work (with the latest master code from gitcdn.xyz):
http://codepen.io/anon/pen/EVeEgb

[topherfangio]

Okay, so I think you have three options here:

1. Toolbar 1 Stays Visible and Toolbar 2 Shrinks - I don't think you need md-scroll-shrink. Just put the second toolbar inside of the md-content like this: http://codepen.io/topherfangio/pen/epLKmq
2. Toolbar 2 Stays Visible and Toolbar 1 Shrinks - You can put the toolbars side-by-side and put the md-scroll-shrink on the Toolbar 2: http://codepen.io/topherfangio/pen/EVeRjj
3. A variation of Button looks weird in dialog demo #2 - You put md-scroll-shrink on both and it still does the same as Button looks weird in dialog demo #2, but it gives a slightly different "push" effect rather than the "cover" effect: http://codepen.io/topherfangio/pen/zvJaBG

Do any of those meet your needs, or are you trying to do something else?

In general, the md-content has really only been designed to work with a single md-toolbar, so anything outside of that is probably going to require some customization.

[nobarany]

Well, # 2 and 3 work for my needs. Thanks! But they shouldn't! The expected behavior is that the toolbar with md-shrink should shrink, not the other one. Am I missing something?

[topherfangio]

The toolbars with md-scroll-shrink use a CSS transform to modify the position of the toolbar and make it disappear. So, it's not actually moving the toolbar anywhere.

So, using md-scroll-shrink on just Toolbar 1 does in fact do the intended (albeit strange) behavior because the component isn't actually moving and causing the page to re-flow and re-position/move Toolbar 2 upwards.

Since the most common case was to handle a single toolbar, that is what we optimized for. If we see a lot of people using it in a different manner, we may consider altering this and/or adding a new option.

If this is something you would like to see, could you please open a new issue with a description and ideally a video or Codepen of the effect you are wanting to create?

Since the original subheader issue is fixed, and we have a workaround for the second, I am going to go ahead and close this issue.

[nobarany]

It works for me, thanks.