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