2

Is there any option to use gridstack.js with each grid-stack-item height based on inner content like image.

In my scenario each images having different height so it's not showing correctly on card.

It gives scrollbar inside grid-stack-item to view image, that is wrong.

Any option or workaround or other JS plugin/library that will restrict fixed height based on any factor.

Current behavior

Current behavior

Expected behavior

Height will be 100% based on width so image aspect ratio preserves.

enter image description here

Yogen Darji
  • 3,230
  • 16
  • 31

2 Answers2

1

I managed to do by setting up cellHeight : 10 then get image in resizestop event and update updateWidget.

Below is sample code for that resizestop event.

 $('.grid-stack').on('resizestop', function (e, item) {
        let stackItem = me.findGridStackItem(item.element.find('img').data('Id'));
        if (stackItem) {
            setTimeout(() => {
                stackItem.option.height = Math.ceil(($(stackItem.nativeElement).find('img').height() + 5) / 10);                   
                me.gridStackMain.updateWidget(stackItem);                
            }, 200);
        }
    });
Yogen Darji
  • 3,230
  • 16
  • 31
0

the problem you are facing is about creating "masonry layout". I think gridstack is not the tool you need to use to resolve this problem. Try https://masonry.desandro.com/ or any other masonry layout lib.

Mykola Riabchenko
  • 630
  • 9
  • 23