Style issue with flex grid and frozen cells

Style issue with flex grid and frozen cells

Posted by: RelationsTechniquesDev on 14 April 2020, 2:16 am EST

• 

  RelationsTechniquesDev

  • Post Options:
  • Link
    Copy

  Posted 14 April 2020, 2:16 am EST

  We are currently using Wijmo 5.20192.631 for components (and Angular 7).

  We face a problem with the FlexGrid component using FrozenCell.

  Let me briefly explain the issue with an exemple :

  • We have modified the style (css) in order to change the background color of a row when the mouse is hover a cell of this row.
  • This style works on Chromium browser but not on other ones :
    
    => the style is not applied on frozen cell.

  To give you a reproduction context, let’s modify a bit the source code of this exemple :
  
  https://www.grapecity.com/wijmo/demos/Grid/Columns/Freezing/angular

  as follow :
  
  .wj-flexgrid {
  
  max-height: 250px;
  
  margin: 10px 0;
  
  }

  /* style frozen cells */
  
  .wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected),
  
  .wj-cell.wj-frozen.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
  
  background: rgb(255,255,125);
  
  }

  [wj-part=‘root’] >.wj-cells > .wj-row .wj-cell {
  
  // we have no choice with your exemple to use !important because if we remove background: rgb(255,255,125);
  
  // then the yellow color is still applied.
  
  background-color: white !important;
  
  }

  // I applied the same style to stress the problem
  
  [wj-part=‘root’] >.wj-cells > .wj-row:hover .wj-cell,
  
  [wj-part=‘root’] >.wj-cells > .wj-row .wj-cell[aria-readonly=‘true’]:hover,
  
  [wj-part=‘root’] >.wj-cells > .wj-row .wj-cell[aria-selected=‘true’]:hover,
  
  [wj-part=‘root’] >.wj-cells > .wj-row .wj-cell.wj-state-multi-selected:hover,
  
  [wj-part=‘root’] >.wj-cells > .wj-row .wj-cell.wj-frozen:hover,
  
  [wj-part=‘root’] >.wj-cells > .wj-row .wj-cell.wj-alt.wj-frozen:hover
  
  {
  
  background-color: black !important;
  
  }

  I tried to understand where from this problem.

  I checked the flexgrid’s elements and one element got my attention :

  This element does not have any children on chromium browser. On the other browsers, it seems that the frozen cells from wj-part="cells".wj-row are duplicated and added to this element.

  We can stress this problem by adding this on firefox :
  
  [wj-part=‘fcells’], .wj-cells.wj-frozen-clone {
  
  background-color: transparent !important;
  
  display: none;
  
  }
  
  and then scroll …

  My style cannot be applied because wj-part=“fcells” is not a children or sibling of wj-row.
  
  (unless to add class by javascript but, at the moment, this is a no way as it work for one browser)

  Why do you have such difference between browsers?
  
  Did you plane to get the same behavior over all browsers?
  
  If yes, which one is the good one? (chromium vs other)

  Best regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 April 2020, 12:19 am EST

  Hi Frédéric,

  To improve the performance while scrolling with frozen cells, we create a clone of the frozen cells so that when we scroll, the scrollable cells move beneath the clone of the frozen cells and scrolling becomes smooth. Also, the cloning of the cells is done according to the browser’s performance.

  Since the rendering engine of chromium is fast, so we do not have to create a clone but the engine of Firefox and other browsers is a little slower, so we have to create a clone of the frozen cells.

  You can use the clonzeFrozenCells property and set it to false so the frozen cells will not be cloned and the behavior will remain the same across all the browser. By default, its value is null so the cloning is done according to the browser.

  I hope it clears your doubts.

  Regards,
  
  Ashwin

• 

  RelationsTechniquesDev

  • Post Options:
  • Link
    Copy

  Posted 16 April 2020, 2:20 am EST

  Good morning/afternoon

  Thank you for your answer.

  We have tried your solution and check the behavior on IE11, Edge, Firefox and Chrome.
  
  We did not notice any difference between Firefox (using Quantum browser engine) and Chrome.
  
  On IE11 and Edge, we have observed the performance issue.
  
  At the moment, I cannot try on Safari.

  It seems to work.

  Best regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 April 2020, 12:01 am EST

  Hi,

  In IE and Edge, the performance may be a little bit slow because their rendering engine is not very good.
  
  But, if the solution works for you, then we are glad that we were able to help.

  ~regard