Weird gray style bloc appearing with angular-material and excel groups

Weird gray style bloc appearing with angular-material and excel groups

Posted by: adrien.corbin on 26 September 2018, 2:55 pm EST

• 

  adrien.corbin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 September 2018, 2:55 pm EST - Updated 3 October 2022, 11:06 am EST

  Hi,

  I currently have a wierd issue where, in our app, we have gray block appearing in our app when there is group opened. It can flicker when moving on the worksheet.

  I narrowed down the problem in this specific case to the display property in angular material. If I comment out, our website does not display properly, but the gray bloc dissapear.

  
  .layout, .layout-column, .layout-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  
  

  I have not been able to reproduce de issue in our default SpreadJS viewer, meaning it is not caused by the css itself but a combination of html and css. Which make it very hard to reproduce. I did not expect that css from an other worksheet than spreadJS css file would impact the style of the canvas.

  I am looking for input to better reproduce/diagnose this error since I can’t know the origin of the gray color in the canvas to my knowledge.

  Thanks

  

  1910×240 18.2 KB

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 27 September 2018, 8:17 am EST

  Hello,

  It is really difficult to tell you the cause of the issue until I am able to replicate the same here.
  
  I would suggest you to test the issue with the latest SpreadJS build, you can download the same from our website. In case the issue persists and is reproducible , please let me know.

  Thanks,
  
  Deepak Sharma

• 

  adrien.corbin

  • Post Options:
  • Link
    Copy

  Posted 27 September 2018, 3:33 pm EST

  I believe you should be able to reproduce this issue which this StylingIssue.zip

  You will need to install package with ```
  
  npm install

  
  Hope this help

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 9:47 am EST

  Hi Adrien,

  I am able to replicate this issue at my end, the issue is caused by the range grouping applied. I removed the range grouping and it seemed to work fine. I used this code:

  workbook.fromJSON(json);
  
  var activeSheet = workbook.getActiveSheet();
  
  activeSheet.rowOutlines.ungroupRange(0,18);
  
  activeSheet.columnOutlines.ungroupRange(0, 20);
  
  workbook.resumePaint();

  May I know how did you create this base64string?

  Thanks,
  
  Deepak Sharma

• 

  adrien.corbin

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 11:19 am EST

  Of course removing the group will fix the issue, but we need those groups. This is a test file, but the original file has about 250 columns grouped by section so the user is not overwelmed.

  I also tried to remove and then add again with the code provided, but the style stays.

  There must be a rule which becomes valid when group is enabled, but I don’t see any reason why my underlying html would have an impact on the style of the cells or the viewer.

  I think this is a bug and I hope it can be fixed. Is it possible to have more information about why it appear? Is it possible to have a timeline for the resolution of this issue?

  As for the base64…just saved to binary to base64? It is done by default when sending bytes from a web server.

  Thank you

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 1 October 2018, 7:55 am EST

  Hello,

  I have reported it as a bug to the development team for further investigation. I will let you know as soon as I get an update from them.
  
  The tracking id for this is 265016.

  Thanks,
  
  Deepak Sharma

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 15 October 2018, 6:01 am EST

  Hello,

  This bug will be fixed in our upcoming build of SpreadJS. For the time being you can use the workaround, suggested by our developers as:
  
  In that CSS, it applies a global layout property which affects the internal measure logic.

  Apply the below style to sample will work around the issues.

  <style>
      .gcBorderWidthDiv{
          display:inline-table !important;
      }
  </style>
  

  Thanks,
  
  Deepak Sharma