javascriptjqueryjquery-uigridgridstack

gridstack.js set grid-stack-item height auto based on inner content

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

Solution

  • 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);
        }
    });