UI error when toggling the menu

0
Hi there,   I have the following issue using charts on a page. When I add the charts and open the page, it looks like this:   When I then toggle the left navigation bar, the main screen is getting a little bit smaller. But the content of the charts doesn't; it simply slides to the right and then is bigger than the underlying container.   Has anyone got an idea how to solve that problem? Maybe there is some way to force re-rendering the chart?   Thanks, Holger  
asked
1 answers
0

Hi everybody,

 

I see there are quite some views of this post, so maybe some other people have the same problem.

 

We could solve it (with the help of Mendix support). There has to be done a little workaround.

 

The main problem is, that the used third party component (plotly) only listens to the resize event of the browser. So we have to fire this event when toggling the menu. As there is no way to add a nanoflow to the toggle menu button, I did the following:

  • Hide the origin toggle button (add style "display: none")
  • Add an image that looks like the toggle button.
  • Call a nanoflow on the click event of this image.
  • The nanoflow has to execute a Javascript action.

 

The action looks like this:

 

// BEGIN EXTRA CODE
function delay(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}
// END EXTRA CODE
 
/**
* @returns {Promise.<void>}
*/
export async function JS_ToggleSidebar() {
      // BEGIN USER CODE
      var toggleBtns = document.querySelectorAll('.toggle-btn');
 
      toggleBtns.forEach(function(toggleBtn) {
            toggleBtn.click();
            delay(100).then(() => window.dispatchEvent(new Event("resize")));
      });
      // END USER CODE
}

 

Hope this helps anybody.

 

Best,

Holger

answered