asked on January 25, 2023
Hi,
We are seeing that sometimes the cells displaying the header hierarchy are not rendered correctly.(See attached screenshot). Using the same version of flexmonster.js, we are seeing this only in some servers, that leads me to believe that this could be timing issue.
Unfortunately, we are not able to replicate this in JSFiddle, but here's the JFSFiddle ( https://jsfiddle.net/7fxwhsj2/3/) that shows the configurations we used.
If we resize the first column, it will render correctly. Is there an API we can use to refresh the grid to fix this issue? Currently we are just calling the setReport() method when displaying the grid.
Regards.
Chen
⋅ January 27, 2023
Hello, Chen,
Thank you for reaching out to us.
We suppose the conflict between the Flexmonster styles and the custom ones causes the issue. It seems that some styling rules may override the suggested CSS settings. You can check the CSS rules in developer tools to find out which properties have higher priority. Try disabling some CSS styles to define which of them leads to unexpected behavior.
Please let us know if it works for you. Feel free to contact us if other questions arise.
Kind regards,
Nadia
⋅ January 27, 2023
Hi Nadia,
Thanks for pointing out that this is CSS related. We allowed user to customize the font size used by the grid. As an example in this JSFiddle, https://jsfiddle.net/pe809w3o/ you can see that I can replicate the issue by changing the font size to 16px using CSS.
Please advise what's the right thing to do if we like to change the font size of the header body cells via CSS.
⋅ January 30, 2023
Hi, Chen,
Thank you for the response.
We suggest adjusting the height of the cells in those cases when users set the custom font size. If the user selects a bigger font size, the height of the cells can be defined like this:
#fm-pivot-view .fm-grid-row {
min-height: 40px !important;
}
You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/fxng460w/
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ January 31, 2023
Hi Nadia,
Can you explain how you arrived at 40px? We need to calculate this value on-the-fly since our customers can specify an arbitrary font size.
Thanks.
Chen
⋅ February 1, 2023
Hello, Chen,
Thank you for the response.
The default cell height is 30px, and the font size is 12px. So it means that if the user sets a font size, for example, to 16px, the height should be:
16*(30/12) = 16*2,5 = 40px
This way, you can calculate the necessary cell height depending on the font size. You are welcome to check the following JSFiddle for illustration: https://jsfiddle.net/flexmonster/ue1w2msg/
:root {
--font-size: 16px;
}
#fm-pivot-view .fm-ui div {
font-size: var(--font-size) !important;
}
#fm-pivot-view .fm-grid-row {
min-height: calc(var(--font-size)*2.5) !important;
}
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ February 1, 2023
Nadia,
The solution you provided worked for us.
Thanks for your help.
Chen
⋅ February 2, 2023
Hi, Chen,
Thank you for the feedback.
We are glad to hear that it works for you.
As always, feel free to contact us in case other questions arise.
Kind regards,
Nadia