Div resizing height with Gridstack container

Question

I'm using the Gridstack.js framework in an app and have some div columns:

<div class="col-lg-6 s_panel">
<div class="cont">
<!-- 1st div content -->
</div>
</div>  

<div class="col-lg-6 s_panel">
<div class="grid-stack">
<!-- Gridstack content -->
</div>
</div>

And I'm setting the height of the 1st Div to be the same as whatever the Gridstack container is like this:

$(document).ready(function () {          
     var divHeight = $('.grid-stack').css("height");
     $('.cont').css('height', divHeight);
});

So on load the divs are both the same height, but if the Gridstack div has more items added to it and grows in height I wanted the 1st div to also be the same height.

Is there a way to dynamically make the 1st div change height to be the same as the Gridstack div as its adjusted?

Answer 1

In case you're using ajax call, I would suggest you should create a function of height change instead of $(document).ready like so:

var helpers = {
    heightChange() {
        var divHeight = $('.grid-stack').css("height");
        $('.cont').css('height', divHeight);
    }
};

And then in your ajax call to makes change/put data in .grid-stack you only need to call your function, full code for example:

 <script type="text/javascript">
    var helpers = {
        heightChange() {
            var divHeight = $('.grid-stack').css("height");
            $('.cont').css('height', divHeight);
        }
    };

    $.ajax({
        url: "test.php",
        type: "post",
        data: values ,
        success: function (response) {
            $('.grid-stack').append(response);
            //call height change here
            helpers.heightChange();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
</script>

Hope this help, feel free to tell me your other problem.