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.
| Property | Description |
|---|---|
@Input()
mdcScrollbarResize
boolean
|
Set to false to disable triggering resize events because of addition/deletion of a scrollbar.
The |