Items shift to the left/right when resizing in a >12 column grid #1321

Activity

1. everskies

   changed the title [-]Grid changes [/-] [+]Items shift to the left/right when resizing in a >12 column grid[/+] on Aug 8, 2020
2. adumesny commented on Aug 9, 2020

   

   adumesny

   on Aug 9, 2020

   Last edited by adumesny

   Member

   More actions

   first of all if you have custom columns (>12) you need special CSS - https://github.com/gridstack/gridstack.js#custom-columns-css - see if that fixes your issue. re-open if still an issue with an example.

   I see you seem to have 64 column CSS but there is something wrong with your styling. for one thing you need to set margin to be tiny (say 1px) as you can't have that many columns in the fiddle case. Tiles are not square either. I don't have time to debug what's wrong with your CSS.

   last time I checked https://github.com/gridstack/gridstack.js/blob/develop/spec/e2e/html/810-many-columns.html was just fine (with 60 column)
3. adumesny

   closed this as completedon Aug 9, 2020
4. adumesny

   added

   status:need more info

   on Aug 9, 2020
5. everskies commented on Aug 9, 2020

   

   everskies

   on Aug 9, 2020

   Last edited by everskies

   Author

   More actions

   It also occurs in the demo and the JSFiddle I've linked. However, I've found the root cause of the issue,

   Having a high column count or a slim grid relative to the amount of columns results in a loss of precision in the dragOrResize function as the X and Width is being calculated by a rounded cellWidth and that result is rounded again after.

   GridStack.prototype.cellWidth = function () {
       return Math.round(this.$el.outerWidth() / this.opts.column); <- Width is rounded
   };
   
   x = Math.round(ui.position.left / cellWidth); <- X is calculated using the rounded cellWidth
   width = Math.round(ui.size.width / cellWidth); <- Width is calculated using the rounded cellWidth
   

   I've resolved my issue by not rounding the cellWidth() result. I'm not sure what other impact this might have.

   GridStack.prototype.cellWidth = function () {
       return this.$el.outerWidth() / this.opts.column;
   };
   

   Can you verify if my solution doesn't break any other logic @adumesny? I'll submit a PR then!
6. adumesny commented on Aug 9, 2020

   

   adumesny

   on Aug 9, 2020

   Last edited by adumesny

   Member

   More actions

   oh I fixed that in 2.x (which is why I couldn't re-pro) #810 (there is a bit more to it) and also fixed the margin thing (which is needed for high column count (#1308).

   I really need to get 2.x out

   dup of #810
   thanks for testing and finding.
7. everskies commented on Aug 9, 2020

   

   everskies

   on Aug 9, 2020

   Author

   More actions

   Ah, that makes sense! I'm glad I was able to practice my debugging skills then :D