Material-components-web: mdc-layout-grid documentation - hiding cell based on device type

[ronnieroyston]

Documentation says

You can do that with the mdc-layout-grid__cell--span-{columns}-{screen_size} classes, where {columns} is an integer between 1 and 12 and {screen_size} is one of desktop, tablet or phone.

How do I hide a cell in the grid based on device type (phone, tablet, desktop)? I don't see documentation on how to do this. Is there an event that fires based on viewport dimension changing that I could listen for? TY

[ronnieroyston]

...allowing for a mdc-layout-grid__cell--span-0-{screen_size} would be very nice.

[yeelan0319]

Thanks for filing it. We feel this will be helpful for more than just mdc-layout-grid so special breakpoint modifiers will not be implemented on a component by component basis.

I am closing this issue here and capture this via issue #23 for implementing global breakpoint.

[ronnieroyston]

Got it. OK TY. BTW: i got it working - I adapted / mashed up some js i
found in mdc-web demo source code with MDN recommendation:

//ON LOAD

//IT'S A PHONE
if (width >= 840) {
//IT'S A DESKTOP
}
else if (width >= 480) {
//IT'S A TABLET
}
//ON RESIZE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
// assuming device is a phone
if (window.innerWidth >= 840) {
//device is a desktop
}
else if (window.innerWidth >= 480) {
//device is a tablet
}
}
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is
in the queue
if ( !resizeTimeout ) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();

   // The actualResizeHandler will execute at a rate of 15fps
   }, 66);
}

}

On Mon, May 22, 2017 at 12:14 PM, Yiran Mao [e-mail]
wrote:

Closed #688
https://github.com/material-components/material-components-web/issues/688
.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/688#event-1092214081,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMKS-7rPjUKHNEz3BpSo1JV6ywJWujk7ks5r8cJ_gaJpZM4NgrxO
.

--

• Ron Royston
  [phone]
  https://rack.pub