Cell height responsive according to content

[theplayer777]

Hello,

Is it possible to make the height responsive according to contents? for example if I have multiple bootstrap grid items inside a cell, I want the height to adapt instead of having a scrollbar when elements stack up (on mobile for example)

Thanks in advance for your help!

[ghost]

Facing a similar issue. Did you find a solution?

[MarkH170]

I'm also having the same challenge right now, did you find any solution yet?

[ensemblebd]

I have completed my version 1.0 of an auto-height for this plugin.. It needs work, but it's fairly functional...

window.GridStackUI.prototype.orig_cellHeight = window.GridStackUI.prototype.cellHeight;
window.GridStackUI.prototype.cellHeight = function(val, noUpdate) {
    if (this.container.data("gs-auto-height") || this.opts.autoHeight) {
        var minimumNeeded_height = val; // start at the value it thinks we need.
        var rowsOfMinimumWidget = this.container.find('.grid-stack-item .grid-stack-item-content:first').parent().data("gs-height"); // use first one by default
        var largestRatio = 0;

        // find the largest container as our basis, as well as the highest ratio. 
        var target = this.container.find('.grid-stack-item');
        var self = this;
        target.each(function () {
            var content = $(this).find('.grid-stack-item-content');
            var child_total_height = 0;
            content.children().each(function () {
                child_total_height += $(this).height();
            });
            child_total_height += ((self.opts.verticalMargin) * 2); // grid option for vertical margin


            if (child_total_height > ($(this).height()-self.opts.verticalMargin)) { // contents larger than container..
                var ratio = child_total_height / $(this).data('gs-height');
                if (ratio > largestRatio) largestRatio = ratio;
            }
            if (child_total_height > minimumNeeded_height) {
                minimumNeeded_height = child_total_height;
                rowsOfMinimumWidget = $(this).data('gs-height');
            }
        });

        var result = minimumNeeded_height / rowsOfMinimumWidget;
        if (self.opts.autoFitByOverflow && result < largestRatio) { // use the largest known ratio of overflowing contents, when overflow is detected. Otherwise use the largest widget height ratio as basis. That way content never appears to overflow.
            var avg = (largestRatio + result) / 2;
            result = avg;
        }
        var heightData = GridStackUI.Utils.parseHeight(result);

        if (this.opts.cellHeightUnit === heightData.heightUnit && this.opts.height === heightData.height) {
            return;
        }
        this.opts.cellHeightUnit = heightData.unit;
        this.opts.cellHeight = heightData.height;
        if (!noUpdate) this._updateStyles();
        return this.opts.cellHeight;
    } else return this.orig_cellHeight(val, noUpdate);
};



//You can use it by adding these two options to your initialization:
var options = {
        cellHeight: 'auto',
        verticalMargin: 10,
        handleClass: 'handle',
        animate: true,
/**************************************/
        autoFit: true,   // just fit based on tallest content.
        autoFitByOverflow: true,    // if you want it to also accommodate the one that overflows the most. Requires previous option.
/**************************************/
        alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
        resizable: {
            handles: 'e, se, s, sw, w'
        }
    };
$(document).ready(function() {
    window.the_gridstack = $('#maingrid').gridstack(options).data('gridstack');
});

Seems to make it completely responsive.
I think I would have preferred to see it auto adjust each one individually, so that they can be slotted according to their height as well as width. But that would be a major overhaul, and this will do for me at this time. Figured I'd share.

[radiolips]

Please see my response in #404 . Using the code I provided will cause a widget to have its height large enough for its content. I believe this resolves the original issue noted here, but please let us know if I'm incorrect. Thanks!