How do I increase org height dynamically?


#1

I am using the left to right so that I can display the org alongside the site’s contents and I can’t figure out how to change the height dynamically based on the number of people in that org. Can someone assist?


#2

Hello @sophia.johnson,

Thank you for your question.

Have you tried the approach described in this article? You can change width to height to fit the content by height:

renderer.onInitialLoadingFinished(function(){ 
 
  renderer.showLoadingPanel();
 
  var $pochContent = renderer.querySelector(".poch-content")
  var $viewPort = renderer.querySelector(".poch-control").children().first();
  var viewPort = $viewPort[0];
  var topOffset = 20;
  var currentZoom = 1;
 
  function adjustHeight(){
 
    var realViewPortHeight = viewPort.scrollHeight * currentZoom;
    var contentHeight = $pochContent.height(); 
 
    if(realViewPortHeight > contentHeight){
 
      currentZoom = currentZoom - 0.1;
      if(currentZoom > 0){
        renderer.zoom(currentZoom);
        adjustHeight(); 
      } 
    } else {
      renderer.hideLoadingPanel();
      renderer.dataProvider.getRootItemId(function(rootId){
        renderer.scrollToBox(rootId);
      });
    }
  }
 
  setTimeout(adjustHeight, 50);
 
});

Would this be a suitable option for you?

Best Regards,
Anna Dorokhova
Plumsail Team


#3

This code seems to adjust the chart to fit the webpart height, which makes my org tiny in size. I need the webpart’s height to adjust to the org chart’s content.


#4

Hi @sophia.johnson,

You can adjust the code a bit to change the webpart height instead of zooming out:

renderer.onInitialLoadingFinished(function(){ 
 
  renderer.showLoadingPanel();
 
  var $pochContent = renderer.querySelector(".poch-content")
  var $pochWebpart = $(".poch-web-part")
  var $viewPort = renderer.querySelector(".poch-control").children().first();
  var viewPort = $viewPort[0];
  var topOffset = 20;
  var currentZoom = 1;
 
  function adjustHeight(){
 
    var realViewPortHeight = viewPort.scrollHeight * currentZoom;
    var contentHeight = $pochContent.height(); 
 
    if(realViewPortHeight > contentHeight){
      
      $pochWebpart.height(realViewPortHeight);
      $pochContent.height(realViewPortHeight);
      adjustHeight(); 

    } else {
      renderer.hideLoadingPanel();
      renderer.dataProvider.getRootItemId(function(rootId){
        renderer.scrollToBox(rootId);
      });
    }
  }
 
  setTimeout(adjustHeight, 50);
 
});

Best Regards,
Anna Dorokhova
Plumsail Team


#5

See I tried and couldn’t figure it out. Thanks so much for your help! One thing I did notice was the person at the bottom was cut off so I added + 50 to var realViewPortHeight = viewPort.scrollHeight * currentZoom and it’s perfect now. Thank you again!


#6

I am glad to help!

Best Regards,
Anna Dorokhova
Plumsail Team