Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Resizing Diagram based on browser size + fluid layout (Read 2397 times)
Chris B.
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 15
Joined: May 30th, 2013
Resizing Diagram based on browser size + fluid layout
Aug 15th, 2013 at 4:02am
Print Post  
Hey guys,

Could you please advise us how we can go about setting width and height of diagram according to available width and height of client's browser? Would it also be possible to resize the diagram if user resizes the browser?

Thanks a lot to MindFusion and Stoyo for all the clarifications and solutions given to us for our various issues. Very much appreciated. Cheesy
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Resizing Diagram based on browser size + fluid layout
Reply #1 - Aug 15th, 2013 at 7:10am
Print Post  
You could resize the diagram and its containing div from onresize handler:

Code
Select All
window.onresize = function ()
{
	var xPixels = window.innerWidth;
	var yPixels = window.innerHeight;
	var mmSize = diagram.clientToDoc({ x: xPixels, y: yPixels });
	diagram.setBounds(new Rect(0, 0, mmSize.x, mmSize.y));

	var parentDiv = diagram.get_element().parentNode;
	parentDiv.style.width = xPixels + 'px';
	parentDiv.style.height = yPixels + 'px';
} 



You could also change the node positions proportionaly to the window x and y resize factors, to keep them at their relative positions to each other while scaling the diagram content to fill the window.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint