Gridstack.js: Removing nested grid parent widget from the last row of main grid causing some of the main grid's widgets to lost their position

Hi,

I experienced a strange behavior when I resize then remove a nested grid from its parent grid.

I have two grids, one of them is nested into the other's specific item.
It is possible to add and remove widgets in both grids by checking/unchecking some checkboxes.
When I remove widgets from the nested grid, I resize its parent grid widget to always be maximum as high as the nested grid.
When the nested grid becomes empty, it has to be removed from the main grid.

Actually everything works fine until one specific case:

1. the nested grid is in the last row of the main grid
2. the nested grid resizing is done with grid.resize()
3. remove the last widget from the nested grid with gridNested.removeWidget()
4. remove nested grid's parent widget from the main grid with grid.removeWidget().

When these steps are done, the last few of the main grid's widgets lost their position and jump into the first row of the main grid - all their data attributes stay correct, just their position become wrong (top: 0, bottom: height of grid). When I re-add the nested grid, everything goes back to the correct position, but after removing the nested grid again, the strange thing happens again. When I once performed the above steps and then try to remove widgets from the main grid, those widgets also keep floating to the first row and then go back after adding a widget. When I move the nested grid anywhere else than the last row, incorrect repositioning won't happen.

As I investigated, the strange repositioning won't happen only after I once resized the nested grid's parent widget, until that adding and removing widgets to both grids works fine. So it seems that the resizing screw up the things.

Unfortunately I can't provide a working fiddle as this is only a part of a bigger script, I can only attach aprovide screenshots of how does it look like.

Before removing the nested (bordered) grid:

After removing the nested grid, some of the other widgets disappeared from their original position and float to the first row of the main grid, while their place is kept in the grid at the correct position (empty white space at the bottom):

My grids are initialized with these options:

grid = $('#grid.grid-stack').gridstack({
            width: 2,
            cellHeight: 84,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            height: 0
}).data('gridstack');        

gridNested = $('#gridNested.grid-stack').gridstack({
            width: 2,
            cellHeight: 80,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            float: true,
            height: 0
}).data('gridstack');

The HTML structure looks like this:

<div id="grid"  class="grid-stack grid-stack-2">
    <div id="element1" class="grid-stack-item element nestedblock" data-id="1" data-gs-width="2" data-gs-height="1" data-gs-min-width="2" data-gs-max-width="2" data-gs-max-height="8" data-gs-y="0" data-gs-x="0">
         <div class="grid-stack-item-content">
             <div id="gridNested" class="grid-stack grid-stack-2">
                 <div id="element20" class="grid-stack-item element" data-id="20" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="0">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
                <div id="element21" class="grid-stack-item element" data-id="21" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="1">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="element2" class="grid-stack-item element" data-id="2" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="0">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
    <div id="element3" class="grid-stack-item element" data-id="3" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="1">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
</div>

I resize the nested grid's parent widget this way:

function resizeNestedParentWidget(){
    var nestedParentWidget = $('#grid .grid-stack-item.nestedblock');
    var nestedGridHeight = parseInt($('#gridNested').attr('data-gs-current-height'));
    var nestedParentWidgetCurrentHeight = parseInt($(nestedParentWidget).attr('data-gs-height'));
    if(nestedGridHeight < nestedParentWidgetCurrentHeight){
        grid.resize(nestedParentWidget,null,nestedGridHeight);
    }
}

I remove widgets from the nested grid this way:

![gridstack1](https://cloud.githubusercontent.com/assets/15252130/25693244/9b3f9ac8-30a8-11e7-9621-1c13cfe5acdb.jpg)

var elem = $('#grid #element'+elemID);
gridNested.removeWidget(elem);

if($('#gridNested .grid-stack-item').length < 1){
    grid.removeWidget($('#grid .grid-stack-item.nestedblock'));
} else {
    resizeNestedParentWidget();
}

What am I doing wrong? Do I misuse something? Or did I find a bug? :)

Thanks in advance.