Hello,
I am using the ejDiagram JS component in an angular project. I am NOT using the angular directive, but plain JS, although that shouldn't be of interest here.
In my template, I have a sidebar navigation which can be minimized. Minimizing the sidebar changes the width of the remaining viewport, which contains the diagram. The diagram, however does not repsond to this size change correctly, as the background grid is not drawn in the additional diagram space (see image attached). How can I solve this? Is there an event which I can trigger from my sidebar-directive upon minimization (in an isolated scope with no reference to the diagram control) which causes the diagram to update? Such as:
window.dispatchEvent(new Event('resize'));
(doesn't work).
Thank you in advance for your answer!
For the sake of completeness, here is the entire angular directive which does the sidebar minimization:
function minimalizaSidebar($timeout) {
return {
restrict: 'A',
template: '<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " rel='nofollow' href="" ng-click="minimalize()"><i class="fa fa-bars"></i></a>',
controller: function ($scope, $element) {
$scope.minimalize = function () {
$("body").toggleClass("mini-navbar");
if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) {
// Hide menu in order to smoothly turn on when maximize menu
$('#side-menu').hide();
// For smoothly turn on menu
setTimeout(
function () {
$('#side-menu').fadeIn(400);
}, 200);
} else if ($('body').hasClass('fixed-sidebar')){
$('#side-menu').hide();
setTimeout(
function () {
$('#side-menu').fadeIn(400);
}, 100);
} else {
// Remove all inline style from jquery fadeIn function to reset menu state
$('#side-menu').removeAttr('style');
}
window.dispatchEvent(new Event('resize'));
}
}
};
};
Attachment:
Capture_8a25af2e.7z
