SpreadSheet resizes incorrectly in CSS grid layout

SpreadSheet resizes incorrectly in CSS grid layout

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

• 

  paul

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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:

  https://www.dropbox.com/s/2uukaf9xqofvwho/repro.zip?dl=0

  • 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.

  good.html

  • 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

  bad_1.html

  • 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

  bad_2.html

  • 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

  ok.html

  • 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!

  Thanks

• 

  paul

  • Post Options:
  • Link
    Copy

  Posted 18 September 2017, 4:35 am EST

  Hi - any thoughts on this?

  Do the provided examples give you enough to work with?

  Thanks

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 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

  Thanks,
  
  Deepak Sharma

• 

  paul

  • Post Options:
  • Link
    Copy

  Posted 18 September 2017, 9:54 pm EST

  Thanks Deepak - look forward to hearing back from you!

• 

  paul

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 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.

  Thanks.
  
  Deepak Sharma

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 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.

  Thanks,
  
  Deepak Sharma
  
  SpreadResizeIssue.zip

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 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.

  Thanks,

  Paul

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 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.

  Thanks,
  
  Deepak Sharma

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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.

  Regards
  
  Avinash

• 

  menzel

  • Post Options:
  • Link
    Copy

  Posted 6 May 2021, 12:52 am EST

  @davide.vago

  I was still having this issue so I did some testing and found a slightly different solution which at least with my app avoids the secondary “screen jump” issue described above.

  All I do is detect resize of the element that contains the SpreadJS instance and then invoke the refresh() method on the workbook.

  So, for example (by the way I’m using Angular):

  <div>
  		<div #spreadsheet (resized)="onResized($event)"></div>
  </div>
  

  onResized($event) {
  		this.workbook.refresh(); // this is my SpreadJS workbook instance
  }
  

  Note that I’m using the node module angular-resize-event to get that resized event. If you’re running in vanilla javascript or jQuery, ymmv. I will note that the CustomToolbars example that came in the zipped up SpreadJS distributable had a resizable formula bar that mostly worked (but did have some issues), so you might be able to look there for some help as well.

  This is obviously very similar to the solution Deepak offered, but it doesn’t require you to resize the child dom size to 0 and it will handle any resize of the div, whether from a window resize event or from a resize of other elements on the page (in my case I have a formula bar which can be expanded by users, subsequently shrinking the workbook’s div). Presumably the omission of the manual resizing of the child dom is what avoids the jumpiness.