Set all boxes to the same height

Org Chart Microsoft 365 version
1

When we zoom in to the org chart to see all details (Name, Title, Department), those with long names or long job titles have taller boxes than those with shorter. Is there a way to make the boxes all the same size regardless of job title/name length? Maybe through CSS?

Thanks

2

Hello @Brendan,

So it will keep the same height for all boxes but change the font size when you zoom in the chart. Is it what you're looking for?

Best regards,
Petr
Plumsail team

3

See attached screenshot, these employee's boxes are all different heights. We would like them to be the same size to make the org chart look less messy

Org chart
Org chart811×247 14.4 KB

4

Hi @Brendan ,
you can set up the box hight manually with a CSS rule:

.poch-web-part .poch-control .pl-item-template {
  height: 150px;
}

I'll advise handpicking the height value for a better quality.

1 Like
5

Thank you. This worked

6

Hi @v.uspenskii ,
I hope you're well - I've just tried the CSS rule you supplied but it isn't working for me as you can see in my screen-shot. The user cards are not the same height - we are using Org Chart 4.

image
image1229×558 72.6 KB

7

Hi @Rhapsidion,

The following CSS rule should work in Org Chart v4:

.poch-application-container .poch-group-item__card.box {
    height: 150px;
}
1 Like
8

Hi @a.cox ,

That works perfectly! Thank you very much for getting back to me so fast :smiley_cat:

I now have another question - is it possible to have the box height dynamically re-sized based on the highest/biggest box? So, for instance, if a new person starts & their box height is higher than 150px, can the box height for all users dynamically change to keep inline with the highest box? We are using Org Chart 4.

9

Hi @Rhapsidion,

The following code should work:

let isLoadingFinished = false;
let maxHeight = 0;

api.onBoxRendered((box, itemData) => {
    const boxCard = $(box.elem).find(".poch-group-item__card.box");
    
    if(isLoadingFinished) {
        const height = getBoxesMaxHeight($(boxCard));
        
        if (height != maxHeight) {
            if (height > maxHeight) {
                maxHeight = height;
                
            }
            setMaxHeightForAllBoxes();
            api.fixConnectionLines();
        }
    }
});

api.onInitialLoadingFinished(() => {
    const boxes = $(".poch-group-item__card.box");
    
    maxHeight = getBoxesMaxHeight(boxes);
    
    boxes.each((i, box) => {
        if($(box).height() < maxHeight) {
            $(box).height(maxHeight);
        };
    });
    
    isLoadingFinished = true;
});

const getBoxesMaxHeight = (boxes) => {
    const boxesHeights = $.map(boxes, (box) => {
      return $(box).height();
    });
    
    return Math.max.apply(null, boxesHeights);
}

const setMaxHeightForAllBoxes = () => {
    const boxes = $(".poch-group-item__card.box");
  
    boxes.each((i, box) => {
        if($(box).height() < maxHeight) {
            $(box).height(maxHeight);
        };
    });
}
1 Like
10

Thank you @a.cox!
Much apprectiated :smiley_cat:

1 Like