Angular-gridster2: is it auto resize possible?

Created on 17 Apr 2019  路  6Comments  路  Source: tiberiuzuld/angular-gridster2

Hi, first off all tnx for creating this, it is really awesome.

Everything is working fine ( frontend and backend side), I just have one question. My grid is of type: 'fixed', (125x125 is size of fixedColWidth and fixedRowHeight, basically square shapes with some elements inside of them). Is it possible for entire grid to be responsive ( aka each time when we resize browser and change screen size entire grid to automatically change size and fit to screen with colSize and rowSize proportionally scaled)?

Tnx in advance

question

Most helpful comment

Hi @Vojislav-Vukovic ,
You want something to keep the same ratio and since you have square widgets configured maybe try scrollVertical since in that grid type the height of the row will be equal to width of the column.

All 6 comments

what you describe sounds much like grid-type: "fit to screen".
what's the difference?

@tmtron Difference is that scaling in 'fit to screen' is not consistent for my use case - check it out on demo page and resize window. In my case I have some circles and squares inside grid so when scaling in this mode they are becoming deteriorated (because width is changing, height is not). That is why I asked for proportionally scaling (if we resize width, height of grid is auto-reduced together with it). I will try out some solutions.

Hi @Vojislav-Vukovic ,
You want something to keep the same ratio and since you have square widgets configured maybe try scrollVertical since in that grid type the height of the row will be equal to width of the column.

Thank you very much @tiberiuzuld . I will try it out just from curiosity because eventually I've changed it to 'fit to screen' and refactored CSS for my objects inside of grid items. Lot of work, but it's all good now :) Tnx again for your help

@Vojislav-Vukovic how did you get it? because in my case, I have 6 col grid and X rows , But, when I refresh the browser, it does not resize correctly. After I drag an item, it resizes correctly. I add two pictures so you can see the difference.

image

This is when I first get into the grid view

image

This is how it looks like after dragging an item. You can see the first image the last item gets 'cut'. Can u help me?

Hi @Vojislav-Vukovic ,
You want something to keep the same ratio and since you have square widgets configured maybe try scrollVertical since in that grid type the height of the row will be equal to width of the column.

Hi, can we achieve the same behavior, but with any scrolling on gridster element, like gridster can use any available width and height of parent but with maintaining aspect ratio of gridster-item?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Vojislav-Vukovic picture Vojislav-Vukovic  路  4Comments

jayoma picture jayoma  路  3Comments

Abdullah-96 picture Abdullah-96  路  5Comments

tiberiuzuld picture tiberiuzuld  路  3Comments

MaiGhoneem picture MaiGhoneem  路  4Comments