I use the left to right format on all my org charts on SharePoint Online, recently all of the boxes have become smooshed together. I did an update and nothing has changed. I have some custom CSS and JavasScript so I tried out of the box and it still is not changing anything. Screenshots below of out of the box in different zones and the custom one. If I hit refresh on the browser it snaps back but only for that moment. If I clear cache it does not do anything. HELP!
Hello, @sophia.johnson
Could you provide me with the content of the "Custom JavaScript" and "Custom CSS" sections of Org Chart Configuration Wizard?
Sophia, please try also these steps:
- to clear browser cache;
- to open the Org Chart page in different browsers;
- to open the Org Chart page in private mode;
- to create a new page, to add an Org Chart web part and to use not only default configuration but also a newly created auto-filled demo-list as a data source.
Also, please specify whether the Org Chart web part is placed on a modern or classic page. Besides, you can provide an external access for our developers (E-mails are sent to you by a private message) for investigating of the issue. Please don't forget to provide your custom code and CSS.
So interesting thing happened. I have a custom CSS for our site theme, and when I changed the theme to our custom coding, that's when the org chart got all funky looking. When I use an OOTB theme, the org chart is fine when I use the demo list. I get the same result regardless if I'm using AD as my datasource. Coding is below:
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 + 75;
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);
});
.poch-content{ background-color: #08395b;
border: none }
.poch-web-part .pl-item .pl-item-template{
background-color: #818A8F;
border:none;
}
.poch-web-part .poch-control .pl-item {
width: 250px;
}
.pl-item-card .field-container {
font-size: 9px;
}
.pl-item-card .field-container.header-field {
font-size: 12px;
}
I had applied your code to my Org Chart having user profiles as a data source but didn't encounter any issues:
So it seems the one is caused by custom theme of your site. Could you test Org Chart with the same configuration on a page of a site with default theme where no customisation was applied?
I think there may be a combination of my style sheet and your web part. Can you please add the org, then select "Change the look" don't even change the theme and select cancel. When I do that, it breaks the org.
Thank you for the clue - I have been able to reproduce the issue and passed the information to developers.
Good Morning, following up on this item.
Hello, @sophia.johnson
Could you confirm that the issue occurs only in the case of attempt to change SharePoint theme and that Org Chart works as expected if you don't touch SharePoint customisation?
If I use an OOTB theme (which I don't want to) it only happens when I attempt to change the theme and then next time I go to the site, it's formatted fine. However, with my custom CSS it's always broken, I believe that it's because SharePoint essentially applies the theme when it's loading, so it's almost like I'm hitting "change the theme" without actually pressing it and therefore smooshes. Is there maybe a delay load I can add to the org chart in the interim to see if that changes anything?
I shall ask developers whether it's possible to delay loading of Org Chart. Could you also provide me with your custom CSS to research the issue?
Also, I would apologise for the delay with solving this issue: since the issue occurs under quite specific conditions (custom styles and left-to-right layout) we shall be able to start solving it only after a few weeks because developers are overloaded with urgent tasks.
Style Sheet below:
{
"Name": "ISS-Theme",
"Palette":
{ "themeLight": "#92b2d1", "themeTertiary": "#4172a3", "black": "#0b0b0b", "neutralSecondary": "#373737", "neutralTertiaryAlt": "#c8c8c8", "themeSecondary": "#0e4378", "themeDarker": "#001d39", "neutralQuaternary": "#d0d0d0", "neutralPrimaryAlt": "#2f2f2f", "neutralPrimary": "#000000", "themeDark": "#00274e", "themeLighter": "#c2d4e7", "neutralTertiary": "#595959", "neutralQuaternaryAlt": "#dadada", "themeLighterAlt": "#eff4f9", "white": "#ffffff", "neutralLighter": "#f4f4f4", "neutralLight": "#eaeaea", "neutralDark": "#151515", "themeDarkAlt": "#002e5c", "neutralLighterAlt": "#f8f8f8", "themePrimary": "#003366" }
,
"IsInverted": false
}
Thank you, Sophia. I have passed the information to the developer for further research.
Following up on a delayed load to see if that changes anything for me. Has there been any updates?
Hello, @sophia.johnson
There is still a queue of tasks that are being solved consequently. I am sorry but we haven't yet gotten to your issue.
Hello, @sophia.johnson
We have released a new version of Org Chart. Please update the package in App Catalogue and check whether the issue is resolved on your Org Chart page too.
Done and much better! The only thing is now my setting gear and fulls screen buttons have become the custom background color that I have set. it was dark grey before. Can you provide me the proper tag to capture those buttons so I can change the color?
