Inconsistent display orientation of org chart

Org Chart
1

Hi,
I'm experiencing some inconsistency around how the org chart is displaying when a page in which the org chart web part is added to loads. I'm using a SharePoint list as the source for the org chart, and displaying the organisational structure based on department.

The customisations I have made are as follows:

Custom CSS:

.poch-web-part .pl-item .pl-item-template{
width:100%;
font:proxima-nova;
}

.poch-content {
zoom:75%;
}

.poch-left-control-zone, .right-control-zone {
display:none!important
}

.poch-toolbar{
display: none;
}

.header-field {
font-size:18px;
letter-spacing:inherit;
}

.pl-item-card .pl-item-fields {
line-height:20px;
}

Custom JavaScript (used to highlight a specific value e.g. XYZ):

renderer.onBoxRendered(function(event, box, itemData){
if (itemData["Title"].contains("XYZ")){
box.$elem.addClass("custom-class").css({'background': '#B3CB83'});
}
});

Often, when the page loads the web part displays as follows (notice that it is stretched very wide):

orgchart-incorrectdisplay
orgchart-incorrectdisplay1951×998 36.1 KB

The way I want the org chart to display is as follows (notice how it fits on the page and cascades the child items correctly):

orgchart-correctdisplay
orgchart-correctdisplay1872×1174 130 KB

Is there something I can do to ensure that the org chart always loads and renders correctly?

2

Joe, we are hoping to do a very similar chart (Tall, vertical, with more than 3 columns). I am hoping your are able to figure it out.

3

Hello everyone,

You can adjust the way your Org Chart is displayed by changing the default layout. Top to bottom compact will work just right for you.

Select it in the 'Default layout' tab of your Org Chart configuration wizard and click 'Finish':

image
image1076×675 147 KB

If the changes are not applied, please click on the settings button (gear icon in the upper right corner) and click 'Clear cache':

image

4

Hi @a.cox - unfortunately we are already using the 'Top to bottom compact' option as the default layout. For each secondary node we have also set this to be 'stacked orientation' so not sure why it still displays as 'horizontal orientation'. Clearing the cache has no effect either.

One thing I have noticed, if I refresh the page, it loads correctly.

Quite frustrating though as it should appear correctly on page load.

Not sure if there is anything I can try to fix this?

Thanks,
Joe

5

Just to add, that my current workaround is to add some JavaScript into the 'Custom JavaScript' box that refreshes the entire page.

It's not ideal, but I can't think of another option.

If someone at Plumsail (or elsewhere) can provide me with some custom JavaScript that only refreshes/reloads the actual Org Chart web part that would be great!

6

Hello @Joe_Fox,

Thank you for your reply.

Please check that your local settings do not override the default layout. You can do this by clicking on the button with the three boxes in the upper right corner. Try setting the Compact layout here too and see if that helps:

image

7

Yep, checked that and unfortunately the problem still exists.

8

Hi @Joe_Fox,

Could you check the console (F12 → Console) for errors when the Org Chart is being loaded? If you find any, please share a screenshot of them here, or send it to us at support@plumsail.com with a reference to this post.

9

Hi @a.cox - I've actually found a solution which seems to be working OK and ensuring the chart displays correctly. I added this custom style:

.poch-node-list-container .poch-level-1 {
max-width:150px;
}

If the issue reoccurs I'll be sure to look at the console and check for any errors. Thanks for your help.
Joe_Fox

1 Like