Font size for assistant?

Org Chart
1

I'd like the fonts in the assistant boxes to match the size for all other employees (both heading row and smaller ones)

I'm not very good with the CSS code. Right now i have this

}
.poch-application-container .poch-assistant .poch-box__field {
  font-size: 15px;
}

It's not producing any changes.

2

Hi @adrienne,

You can use the following CSS code:

/* Assistant Box Header */
.poch-application-container .poch-group-item_assistant .poch-box__field.poch-box__header {
    font-size: 20px !important;
}

/* Assistant Box Field */
.poch-application-container .poch-group-item_assistant .poch-box__field {
    font-size: 15px !important;
}
3

Thank you for the reply!

It doesn't seem to be helping. I've loaded it in and no change.

A note to add, the name field is rich text, however that's the case for all the names, not just Assistants, and the rest are the same size. Also the Font size on the headers of some Assistants is the same size as most staff but the name is small. And for others both the Header and Name are small.

4

Hi @adrienne,

Indeed, the solution I suggested won't work. The assistant box is added the very last, and so the default CSS is applied to it, no matter how you try to change it. You can get around this by modifying the CSS after the box is loaded using Custom JS:

api.onBoxRendered((box, itemData) => {
  if (itemData.pochContext.boxType == "Assistant") {
    let $cardHeader = $(box.elem).find(".poch-box__header");
    let $cardFields = $(box.elem).find(".poch-box__field")
    
    $cardHeader.css({
      "font-size": "20px"
    });
    
    $cardFields.css({
      "font-size": "15px"
    });
  }
});
5

Something isn't working quite right.

image
image726×418 15.6 KB

Pink is Box Style Rules based on the department.
It does have a font size set for Heading and Content. Only the Heading is applying.
As you can see in the grey, this group has no box style applied, and none of the CSS you provided is applying.
The Heading font size is coming from the Box style rule, not the CSS, because if i remove it, it remains.
I also tested the code in with Javascript removed and that made no impact.

6

Hello @adrienne,

Could you please clarify what version of Org Chart you are using?

Also, are you sure you have correctly added the JavaScript code I sent in my previous post? Please note that if you have multiple onBoxRendered events in your custom JavaScript, it won't work. It would be great if you could send me the code you use in PM.