Need a special offer?Find out if your project fits.
+

Cells displaying header hierarchy not rendered correctly

Answered
cwoo 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
 
 
 

7 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 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

Public
cwoo 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.

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 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

Public
cwoo 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

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 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

Public
cwoo February 1, 2023

Nadia,
The solution you provided worked for us.
Thanks for your help.
Chen

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 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

Please login or Register to Submit Answer