Repository navigation
Rounding error when scaling the position up using autoPosition #2358
Description
https://jsfiddle.net/8eur9joL/
Hello, so I am having trouble getting my grid to adjust the cells when my window resizes to where they belong without changing the size of the cells, just by changing the number of columns.
I have gridstack 8.1.1 on Chrome Version 114.0.5735.110
The fiddle now shows how it fails even when loading it the first time, but the error that focuses me is when you change the tab size.
I would expect it to move to the next row and first column available
(Video fiddle: https://jsfiddle.net/qs9cn1hw)
Activity
CristianCG86 commentedon Jun 11, 2023
I have same issue plus relocation problem. When I load the page the grid have 4 columns, but when shrink the page and the number of columns is decreased, the items are relocated to the right vertically.
Before column number decreased:
After column number decreased:
I use this jsfiddle to test: https://jsfiddle.net/CristianCG/51kpLvx4/62/
adumesny commentedon Jun 11, 2023
@CristianCG86 not sure why you are calling column() in a loop - seems like a very bad idea. Anyway in your case you are asking for a compact() like method flag when calling column() - since you know your items are ordered and same size - which is a special (but common) case and different from above issue. That feature could be added.
(feat) column() resizing now supports 'list' | 'compact' modes
adumesny commentedon Jun 13, 2023
@CristianCG86 you're in luck as I added this feature -
column(N, 'list')will now do what you want. in next release.@rbarrer0 not sure if that would solve your problem as well... maybe you can play with the new flags and see.
don't forget to donate if you find this lib useful!
adumesny commentedon Jun 13, 2023
with list mode and more complicated than just 1x1 items (which is easier to do)
https://github.com/gridstack/gridstack.js/assets/3496166/fccaa6d7-f953-49e8-aca1-8e81a984f98a
same with 'compact' which fills available space, in this case changing the order to fill void left by item 10
20230612_210003.mp4
and random items with scale+move again for comparaison. depends on what you grid looks like (a list or random floating items)
https://github.com/gridstack/gridstack.js/assets/3496166/ff462db0-2dcc-495e-a947-fdf1b9b16488
CristianCG86 commentedon Jun 13, 2023
Nice!! I tried compact and work for me. But I wait for the next version to try 'list' feature. Thanks
PS: jsfiddle with compact test https://jsfiddle.net/CristianCG/51kpLvx4/77/
adumesny commentedon Jun 13, 2023
@CristianCG86 cool, but you will find the new metod works better as it sort tthrough items using the original grid count, then lay it out using new count with no constrain of 'none' which has to move items to fit and therefore mess the order.
essentially
column(N, 'list' | 'compact')callscompact('list' | 'compact')but timing is key here.column(n, 'list') handles restore back to 12 size