Utility

The mdcScrollbarResize directive triggers window resize events when the document body changes width, due to a vertical scrollbar being added to (or removed from) the page. This solves problems with directives that base their layout or position on the width of the document body, and listen to resize events to update their layout.

The layout of following Blox Material directives can be fixed with mdcScrollbarResize: mdcRipple, mdcSlider, mdcTabBar, and mdcTabBarScroller.

API

Directive: MdcScrollbarResizeDirective

Selector: [mdcScrollbarResize]

Utility directive to trigger window 'resize' events not only when the browser window is resized, but also when the browser window gets a vertical scrollbar. This solves problems with directives that base their layout or position on the width of the document body. When a scrollbar is added, the body width changes, but the browser doesn't fire a 'resize' (or other) event. As long as at least one mdcScrollbarResize directive is active on the page, 'resize' events will also be fired when the body width changes as a consequence of the addition or removal of a vertical toolbar. The directive adds a hidden iframe to the page, that contains the trickery to make this happen. See this hacky-scrollbar-resize-listener.js github gist for the original idea.

PropertyDescription
@Input()
mdcScrollbarResize
any

Set to false to disable triggering resize events because of addition/deletion of a scrollbar. The mdcScrollbarResize behavior is removed after all mdcScrollbarResize directives on the page are removed or have the value false.