Cells displaying header hierarchy not rendered correctly

Re-Open
cwoo asked 6 days ago

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
 
 
 

4 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster 5 days ago

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 4 days ago

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 2 days ago

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 9 hours ago

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

Please login or Register to Submit Answer