Aspect ratio on Mobile

[lstump]

Thank you for your helpful project!

If I layout my items on a grid with multiple columns (say 12 columns) and then shrink the viewport down to mobile size, my items are resized ONLY according to their height (in rows) without their width (in columns) being taken into account. This means that 'large' grid items (say 4 columns by 3 rows) become much taller on the mobile without regard to their original aspect ratio. Such items go from 4:3 to 2:3. Note that their actual width at the mobile break point is much wider than their actual width BEFORE the breakpoint, but their relative height suddenly doubles. In other words, all of my items show up way larger on the mobile without needing to.

If I change the line in GridsterRenderer:UpdateItem
FROM
renderer.setStyle(el, 'height', (this.gridster.curWidth / 2 * item.rows) + 'px');
TO
renderer.setStyle(el, 'height', (item.rows * this.gridster.curWidth / item.cols ) + 'px');

It does the trick for me, but I'm sure it would break other people to whom preservation of the relative areas of the grid items is more important than preserving their aspect ratios...

Do you have any suggestions for me?

Thanks!!!

[tiberiuzuld]

Hi @lstump ,
I think that you are right that we should keep the aspect ratio.
I like your solution to it, I think I will make the change and see if anyone complains :D
Seems a better solution than the current one.

Thanks

[tiberiuzuld]

Deployed in v8.1.0