Spreed Js container DIV not resizing correctly

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

  • Posted 26 October 2020, 8:36 pm 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.

  • Replied 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
  • Replied 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.
  • Marked as Answer

    Replied 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
  • Replied 4 November 2020, 5:06 am EST

    Thanks Avinash. This Worked.
Need extra support?

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

Learn More

Forum Channels