GridStack is not positioning elements properly on page after they hit a specific y-axis point

Question

When I am loading a saved layout, if the layout has a height larger than what is already loaded on the page at $('.grid-stack').attr('data-gs-current-height'), the elements with a y-axis which goes over that load at the top position of the page. Their y-axis labels are reflected correctly in the DOM.

If the height of the document does not change, it works as intended. This only occurs when the newly loaded widgets have a greater combined height than the document they are being loaded into.

I have used the following code to change both the ('.grid-stack').attr('data-gs-current-height') value and the height of the element value prior to loading the widget, but they still render the same stacked on top of one another although the data-gs-current-height does show it has updated prior to loading the widgets new values in the DOM.

The code I use for changing the grid stack height is:

var changeGridStackHeight = function(gridStackHeight, docHeight, json){
        $('.grid-stack').attr("data-gs-current-height", gridStackHeight);
        $('.grid-stack').css('height', docHeight);
        loadUserTemplate(json);
    };

and loadUserTemplate(json) is:

var loadUserTemplate = function(json){
        var firstArray = json[0];
        var parsed = (JSON.parse(firstArray));
        var gridStack = $('.grid-stack-item');
        var plength = parsed.length;

        gridStack.each(function(index){
            var count = 0;
            var gridstackId = $(this).attr('data-custom-id');
            for(var i=0; i < plength; i++){
                if($(this).attr('data-custom-id') === parsed[i].id){
                    $(this).attr('data-gs-x', parsed[i].x);
                    $(this).attr('data-gs-y', parsed[i].y);
                    $(this).attr('data-gs-width', parsed[i].width);
                    $(this).attr('data-gs-height', parsed[i].height);
                }
                var equals = Number(parsed[i].id) == Number(gridstackId);
                if(equals === true){
                    count++;
                }
            }
            if(count === 0){
                $(this).css('display', 'none');
            }
        });
        var reposition = window.setTimeout(function(){
            fixSizes();
        },1000);
    };

Answer 1

I found a way to solve my particular issue although I don't assume this is the way it was intended to be fixed as it does have additional problems associated with it it. If anyone in the future has a way that is better suited please post it and I will mark your answer as the correct way in the event it works.

I found gridstack is creating it's own stylesheet that sets a _max: to whatever height my grids add up to. It iterates through each widget and settles on the final height. There is a line in gridstack.js that update the maxHeight. I added the "105" to the end of it as that is as large as I need it to be for my particular case. That line of code looks like this now:

self._updateStyles(maxHeight + 105);

The problem it creates is that when a user attempts to alter a grid that was loaded, it places the widgets all over the board. It's possible that I can make it so widgets can't be resized or moved from a saved template but again, that is not the correct functionality of the plugin.

Answer 2

Did you try saving the grid positions with grid options while loading the widgets? Please check the new grid stack documentation.