Material: toolbar: md-scroll-shrink only works with explicit size of md-content

[matthiasg]

The way its implemented right now [md-scroll-shrink] does not work with generated content for our main use case of generated pages inside the content (e.g an arbitrary html snippet, might be a list or something else).

That way the designer would have to know beforehand how large the remainder of the screen is. Usually [flex] could be used, to fill the rest of the vertical space , but that does not seem to work here.

This happens because the toolbar is listening only on scroll events of the content itself which only get emitted when the content area itself is specifically set to an absolute height smaller than the content.

Basically this make this directive only useful when multiple such headers and content areas are supposed to be underneath each other not for the majority use case of one toolbar with one content are on the screen or am i missing something ?

[yxh10]

@matthiasg Hi, Matt. I think I have found a way to use this. Make your content use the css height: 100vh;. In that case, md-scroll-shrink will work. However, it is still buggy. If you scroll down to the very bottom of the content and try to scroll back, the tool bar will come back smoothly. It stuck half way thought, until you scroll all the way to top.

[matthiasg]

i actually wrote a new directive for our project internally which handles header lines, variable lines etc since there where also errors in the way it is currently implemented..

e.g when the header is rather big (lets say 200px) and each item is rather small (~32px) then you can reach a state where there is NO scrollbar to be seen even though you are not at the end of the list. this is because the scroll area itself resizes causing a number of issues (i.e the size of the container changes WHILE scrolling itself)....

[jakubweber]

We're solving this issue too.
In demo is absolute height for md-content, but usually is relative. That's problem. There is some solution to solve that?

[levbrie]

+1

[JalalAlbasri]

+1

[r0b-]

+1

[amritk]

+1

[lixapopescu]

+1

[mikkokam]

PROBLEM 1
Angular Material toolbars: md-scroll-shrink needs a fixed height md-content below to work. No way to use relative measurements.

PROBLEM 2
The fixed height content will be transformed up by the directive and the lower border of the content creeps up as the toolbar is hiding.

FIX

• You can use vh for the md-content (where supported). Problem 2 remains.
• A better fix: Wrap the toolbar and the content in an outer div, set it's height to px or vh.
  Now you can set the md-content to be relative (of the outer container, naturally).
• Alternatively, the outer wrapper can be positioned absolutely, with an 'auto' height.

http://codepen.io/mikkokam/pen/PqpZoN

[gpopovic]

+1

[tommy8694]

+1

[Grandclosing]

I've tried the solution of setting the md-content's height to 100vh, and it worked perfectly; However this created a second scrollbar. I solved this by setting the body's overflow-y property to 'hidden'.

[joshtsen]

In my case (and others I'm assuming) I wanted a scroll-shrink below another toolbar. If you know the size of the toolbar (64, 88 or 128 px) and you are using a browser with CSS3 and the outer div solution you can do:

 #outerDiv {
    height: calc(100vh - 64px); // vh or % works
    height: -o-calc(100% - 64px);  // opera 
    height: -webkit-calc(100% - 64px); // chrome, safari 
    height: -moz-calc(100% - 64px);// firefox
 }

It's not a complete fix but might work for some of you.

[naomiblack]

This would be a great addition; I'd like to revisit post-1.0. Due to the complexity of scroll interactions, I don't think we can make this change on our 1.0 timeline. (Clever PRs very welcome. This is a tricky issue to get 100% right.)

[hdvmedia]

@mikkokam I implemented this work around and it works on desktop. In iOS 9, however (Safari), if you scroll all the way back to the top, the toolbar is hidden behind Safari's navigation bar. Can anyone else reproduce this behaviour?

[jamalx31]

+1

[kazmenko]

+1

[csvan]

+1

[hkjels]

@hdvmedia I still see this issue. We've just turned off md-scroll-shrink. Another problem that I don't think there's a good fix for is iOS.

[jonaszuberbuehler]

+1

[mackelito]

+1

[heoseok]

+1

[georgegoncalo]

+1

[cp9162]

+1

[devversion]

@corentin-gautier Can you confirm this issue with your PR #7763?

Since the scroll shrink is now determining the height by using $$rAF, it should be able to recalculate the height of the md-content

[corentin-gautier]

@DevVersion Yeah but I don't think it was an issue with the md-content. It was the toolbar size that was not determinate

[2nise]

+1

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[Edorka]

+1

[durbonas]

+1

[LeoLozes]

+1 It would be nice also to be able to define scroll-shrink only for md-toolbar-tools, especially when using md-tall (keeping the main toolbar visible, but shrink the extended description).

[RR90]

+1

[rafaeldev]

+1

[ayurushev]

As a workaround i apply the following directive to md-content

app.directive('autoHeight', ['$window', '$timeout', function($window, $timeout) {
    return function(scope, element, attrs) {
        var resize = function() {
            $timeout(function() {
                element.css('height', $window.innerHeight + $window.pageYOffset - element[0].getBoundingClientRect().top);
            });
        };
        element.on('scroll', resize);
        angular.element($window).bind('resize', resize);
        resize();
    };
}]);