Spreed Js container DIV not resizing correctly

Spreed Js container DIV not resizing correctly

Posted by: accounts on 26 October 2020, 8:36 pm EST

• 

  accounts

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 October 2020, 8:36 pm EST - Updated 3 October 2022, 1:07 am EST

  Hi

  I am trying to load json the data into the spreedjs container, but the size of the excel view is very small, although the data from json is loaded correctly… Attached is a screenshot.

  As it can be seen in the image, the div container size is appropriately set, but the spreads canvas is very small inside the div.

  

  1887×845 94.3 KB

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 28 October 2020, 1:52 am EST

  Hi,

  We are unable to replicate the issue at our end. Please share a sample that replicates the issue so that we could investigate further. You may also check the sample and let us know if we have missed some steps.

  sample: https://codesandbox.io/s/wizardly-cohen-4xksc?file=/src/index.js

  Regards
  
  Avinash

• 

  accounts

  • Post Options:
  • Link
    Copy

  Posted 29 October 2020, 6:00 pm EST

  Thanks for your response. I contacted your support and got a response that your the dev team is looking into it,

  But in brief, this is what is happening:

  When I set the height and width in terms of pixels of the div containing the spreadjs it works.

  However, In my application, the screen needs to be responsive to window size. Hence as you can see in the screenshot attached, I have set it in terms of %(as below). That’s when the size issues starts to happen.
  
  .excel-view {
  
  margin: 20px;
  
  height: 85%;
  
  width: 90%;
  
  }

  FYI, this is an angular application.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 1 November 2020, 11:59 pm EST

  Hi,

  Thanks for the information. For setting the height in percentage first you need to set the height of the HTML body to 100%. Also, You need to call spread.refresh() method after changing the height of the spreadsheet. Please refer to the following code snippet and attached sample for demonstration and if the issue persists please share a small sample that replicates the issue so that we could investigate further.

  
  //Style.css
  
  html,
  body {
  font-family: sans-serif;
  height: 100%;
  width: 100%;
  }
  //app.component.ts
  changeHeight() {
  this.hostStyle.height = this.hostStyle.height === "50%" ? "100%" : "50%";
  setTimeout(() => {
  this.spreadsheet.refresh();
  });
  }
  

  sample: https://codesandbox.io/s/pensive-hofstadter-mmvem?file=/src/app/app.component.ts:1510-1673

  API Reference:
  
  Refresh: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.Workbook~refresh.html

  Thanks
  
  Avinash

• 

  accounts

  • Post Options:
  • Link
    Copy

  Posted 4 November 2020, 5:06 am EST

  Thanks Avinash. This Worked.