My understanding is that a canvas element should reset anytime a window is resized
Perfect for most cases
But there’s an edge case that is bugging me…
I need the canvas to reset when the hamburger navigation is clicked since on some screens (tablet-sized) this will resize the canvas but the reset event is not triggered…
Here’s a gif of the issue - you can see when I resize the window reset is triggered
but when I hit the hamburger icon the Canvas Element becomes distorted since the reset event is not triggered…
Solved
I had to trigger a window resize event after the hamburger was clicked
I did this in the Material Design’s standard page html
and was only 2 lines of code
Below is the change - it’s just the line:
$(window).trigger('resize');
// or
window.dispatchEvent(new Event('resize'));
Edit
I put the code in the hideSidebar(); function (inside the animate function) and also in showSidebar(); (outside the anmiate function).
function hideSidebar() {
var ln = $('.structure > .nav-holder > .left-nav');
ln.animate({left: -ln.outerWidth()}, function() {
// i'm the line of code to add inside animate function
$(window).trigger('resize');
ln.removeClass("in-transition shown").addClass("hidden");
$('.nav-shield').removeClass("shown");
});
}
function showSidebar() {
// i'm the line of code to add outside animate
$(window).trigger('resize');
var ln = $('.structure > .nav-holder > .left-nav');
$('.nav-shield').addClass("shown");
ln.addClass("shown").removeClass("hidden").css({left: "-100%"}).css({left: -ln.outerWidth()}).animate({left: 0}, function() {
ln.removeClass("in-transition");
});
}
Nice one, Stu - big props for bringing us both the problem and the solution there! We’ll be updating the Material Design template for all new apps.
(In fact, the $(window).trigger(...) call can go outside the animate() callback in showSidebar - the narrowing of the main pane happens at the start of the animation, so we can trigger the resize immediately. In hideSidebar, it should stay inside the function, because the width change happens at the end: we want to resize after we’ve removed the shown class from the .left-nav)
You could insert the lines of code as @stucork suggested. Or, when we release the update, you could make a new app and copy-and-paste the contents of standard-page.html from the assets of the brand new app into your existing app.
Thanks, @meredydd. I’ll take your second approach. By then, you’ll have worked out any additional details that might be necessary/advisable. You are the best people anywhere to do that sort of thing.
All we need then is some kind of notice to tell us when to grab your new standard-page.html.
