Invalid-state row header styling

Posted by: peter_murray on 3 December 2019, 7:50 am EST

    • Post Options:
    • Link

    Posted 3 December 2019, 7:50 am EST - Updated 3 October 2022, 9:35 am EST

    Hello,

    We recently ran into an issue with the native wijmo styling of the flex grid. As you can see in the image, there is an overlap of cells in row number 2, where the left border of one cell can be seen overlapping the row header. This happened when a cell entered an invalid state and was scrolled horizontally until it was “under” the header cell.

    Using the developer console, We found that this is because of this styling:

    
    .wj-rowheaders .wj-cell.wj-state-invalid {
        background: rgba(255,0,0,.3);
    }
    
    

    The last value, the alpha, was causing this defect, and so the solution we implemented was to set the color of this row header to it’s hex value, or #F6A9A9 so that we could no longer see the cell underneath it.

    What we’d like to know is if anyone else has encountered this error, and if this is a defect with wijmo?

  • Posted 3 December 2019, 6:23 pm EST

    Hi Peter,

    The issue observed by you is by design. The FlexGrid is designed by different panels and these panels get drawn at their position. But as the scroll operation is performed, the value cells do not get destroyed until they are not completely out of the viewport of the host element.

    That is why in this case, as you set the row headers background colors with the transparency, on scrolling the Cell content gets displayed partially.

    Hence, we recommend not to set the headers background color with transparency.

    In case if you have any specific use case to set the headers back color with transparency, please let us know we will discuss it with the development team and let you know.

    Regards,

    Manish Gupta

  • Posted 4 December 2019, 1:56 am EST

    Thanks for the reply, but to clarify, we’re not setting the transparency here. The developer console tells us that the aforementioned code block comes from wijmo.min.css:13-this is default styling we’re seeing. Additionally, this overlap is only visible when the cell is in an error state.

    Examining this file appears to show it’s from a version of wijmo from 2016, specifically v5.20163.259, in a comment. The version we’re using is 5.20193.637. Do we need to continue using this file if the versions do not align? And if we do, then why does this overlap issue take place with default wijmo styling?

  • Posted 4 December 2019, 5:12 pm EST

    Hi Peter,

    We were able to find the provided CSS in the version 5.20163.259 and not in the 5.20193.637 version. So, if you are using the latest version of wijmo, then this issue should not occur. Also, using the 16v3 CSS file with 19v3 wijmo will cause some serious UI issues because many of the control templates have been changed.

    Regards,

    Ashwin

  • Posted 5 December 2019, 3:01 am EST

    Thanks again. So the solution would appear to be updating wijmo so this stylesheet is correct, but we have attempted to do so and seen no change in this file. We’ve tried deleting the node_modules folder and re-running npm install, running npm install wijmo, and deleting the stylesheet then running the latter command.

    Do you have any further suggestions for us as to how we might solve this?

    Thanks!

  • Posted 5 December 2019, 10:03 pm EST

    Hi Peter,

    You need to delete the old wijmo stylesheet from your project and then import the style sheet from the wijmo.styles package.

    import '@grapecity/wijmo.styles/wijmo.css';
    

    If your module bundler is not configured to import CSS then you need to copy the above file into your project and then refer to the stylesheet via link tag.

    Regards

    Sharad

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels