SpreadSheet resizes incorrectly in CSS grid layout

Posted by: paul on 14 September 2017, 11:29 pm EST

  • Posted 14 September 2017, 11:29 pm EST

    We are seeing issues when using a SpreadJS within the CSS grid layout.

    Here is a link to a zip of four repro HTML files:


    * good.html - shows a simple grid-display div setup, with two columns. Both columns are simple divs with different coloured backgrounds
    * bad_1.html - shows a simple grid-display div setup, with two columns. The LHS div is a SpreadJS instance, the RHS column is a simple div with a blue background
    * bad_2.html - shows a SpreadJS instance by itself as the single column within a simple grid-display div setup
    * ok.html - shows a SpreadJS instance by itself with no grid-display divs, 100% height and width

    Here are links to four screen recordings showing resizing of each within the Chrome developer window:

    good.html: https://www.dropbox.com/s/bu6hh1dex0imso9/good.mov?dl=0
    bad_1.html: https://www.dropbox.com/s/1x8e79sbl3pslne/bad_1.mov?dl=0
    bad_2.html: https://www.dropbox.com/s/f7nddc31vn41jq6/bad_2.mov?dl=0
    ok.html: https://www.dropbox.com/s/1d59gl9wmfm5mii/ok.mov?dl=0

    Here are some observations about each.


    * Notice the red border that surrounds the grid is even on all sides at 15px
    * Notice during resizing that this border is maintained and correctly recalculated
    * Notice that throughout, the gap between the two columns is maintained at 5px


    * Notice that even before any resizing has happened, the RHS column of the grid is spilling over the top of the red border (i.e. the padding in the containing div). So this isn't even rendering correctly to start with
    * If we then reduce the width, the SpreadJS instance's width is not recalculated and everything spills off to the right
    * Same if we reduce the height
    * If we instead (after a refresh) we first grow the window, the resize does appear to recalculate things properly... but any subsequent reduction in size, everything goes wrong


    * Again, we have a bad start-state like bad_1.html
    * Same issues as far as downsizing is concerned
    * But again, if the first change is an increase in window size, things calculated correctly... but then go bad again when downsized


    * This behaves as expected; the initial render shows the even red border, and resizing (after a slight lag) retains that border

    Any help much appreciated!

  • Replied 18 September 2017, 4:35 am EST

    Hi - any thoughts on this?

    Do the provided examples give you enough to work with?

  • Replied 18 September 2017, 9:01 pm EST

    Hi Paul,

    Thank you for sending the sample application. I am able to replicate this issue at my end. I have reported it to the development team for further investigation. I will let you know as soon as I get an update on this.

    The tracking id for this issue is :245805

    Deepak Sharma

  • Replied 18 September 2017, 9:54 pm EST

    Thanks Deepak - look forward to hearing back from you!
  • Replied 18 September 2017, 9:55 pm EST

    Just a quick question in the meantime; I don't appear to be able to subscribe to this thread to get updates by email - am I missing something really obvious?
  • Replied 21 September 2017, 5:10 pm EST

    Hi Paul,

    This is a known issue caused due to migration of our old website to this new one.
    Our web development team is working on this, it will get resolved soon.

    Deepak Sharma
  • Marked as Answer

    Replied 3 October 2017, 5:26 pm EST

    Hi Paul,

    This is found to be the current design when initializing spreadjs in the first time, internally we need set fixed size to the canvas and some element for some implementation reason. but in the grid layout, once the child dom element has fixed size, it will not resize smaller anymore, and the child dom element size will affect host parent dom size.

    Let me take an example:

    In the beginning, the host size is 1000, host child dom size is 1000, if resize the window to 1100, because child dom size is smaller than host size, host size will change to 1100, then sjs will resize the whole control based on 1100.

    but if resize the window to 900, because child dom size is bigger than host size, it will affect the host size kept 1000, that is what customer saw.

    Please see reproduce_without_sjs.html sample, it is the same.

    For workaround:

    You can handle window.resize method, and adjust the child dom size to 0 manually, then invoke refresh method of spreadjs.

    Please refer to the attached sample applications for better understanding.

    Deepak Sharma
  • Replied 16 October 2017, 7:25 am EST

    Hi Deepak,

    Thank you, this work around does indeed fix the problem we were seeing.

    One issue that remains is that the screen jumps around a bit as the adjustment is happening. But we can follow up on this at a later date.


  • Replied 24 October 2017, 5:14 pm EST

    Hi Paul,

    Good to know that your issue is resolved, please feel free to get back to me when you need help.

    Deepak Sharma
  • Replied 10 March 2021, 8:55 pm EST

    Dear support,

    I just wanted to check out if the hack snippet to solve the original resize problem is still needed in the last versions (v 14.0.x).

    In case an hack still needed, do you have anything a bit more optimised? the snippet has been always an heavy task for the browser.

    Looking forward to hearing from you
  • Replied 11 March 2021, 9:26 pm EST

    Hi Davide,

    We have asked regarding the same to Dev Team. We will update you once we have any information from the team.

Need extra support?

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

Learn More

Forum Channels