Get Free Trial
Get Free Trial

Header cell styling breaks when text contains angled brackets

Yousif Ahmed asked on June 4, 2019

Hi Flexmonster,
 
During our testing we have noticed that the width of the header cells becomes inconsistent if one of the fields contains angled brackets – I have prepared a couple of examples that illustrate the issue:
 

  1. Data with angled brackets: https://jsfiddle.net/yahmed/6vhf1pL3/
  2. Data with angled brackets replaced: https://jsfiddle.net/yahmed/6vhf1pL3/2/

 
You can see that when the data contains angled brackets, the width of the ‘Income Band’ column header cells become out of line with the rest of the grid. It seems as though the width of the text, and therefore the min-width of the cell, is calculated incorrectly due to the angled brackets, even though the value is in a quote enclosed string.
 
As our datasets are JSON ‘arrays of arrays’, and can be very large in size, it is not feasible to replace all occurrences of angle brackets or other HTML entities in our data, and I cannot find a reliable way of correcting this via css. As we are passing values as strings it feels like flexmonster should be able to cope with these characters. Is this a bug that could be resolved easily?
 
Kind Regards,
 
Yousif
 

3 answers

Public
Vera Didenko Flexmonster June 5, 2019

Hello, Yousif,
 
Thank you for bringing this to our attention and for providing examples illustrating the issue.
The JSFiddle examples helped a lot to understand the problem.
 
Our team needs some time to research the reason why the width of the header cells becomes inconsistent.
We will notify you about the result with the ETA 1st of July.
 
You are welcome to contact us in case any questions arise.
 
Best Regards,
Vera

Public
Vera Didenko Flexmonster July 2, 2019

Hello, Yousif,
 
 
We are happy to let you know that the issue with the inconsistent width of the header cells was fixed.
Please refer to the following example: https://jsfiddle.net/yahmed/6vhf1pL3/
 
This is included in the 2.7.9 version of Flexmonster: https://www.flexmonster.com/release-notes/
 
You are welcome to update the component.
Here is our updating to the latest version guide for assistance: https://www.flexmonster.com/doc/updating-to-the-latest-version/ 
 
 
Feel free to write to us in case of questions.
 
 
Best Regards,
Vera

Public
Yousif Ahmed July 4, 2019

Thanks Vera – we have upgraded to the latest version and the issue has gone away which is great.
 
Kind Regards,
 
Yousif

Please login or Register to Submit Answer