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

[PrincessOfSecret]

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:
0. the nested grid is in the last row of the main grid

1. the nested grid resizing is done with grid.resize()
2. remove the last widget from the nested grid with gridNested.removeWidget()
3. 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.

[radiolips]

Hey, @PrincessOfSecret ! Your screenshots look very interesting!

Thanks for providing all of that code, but could you put together a jsfiddle with an example of the problem? That's the easiest way for me to be able to verify the problem and make sure I'm able to fix it.

[PrincessOfSecret]

Thanks for the reply. I tried to put together a jsfiddle, but unfortunately it didn't work as it had to, because as I said, it is a quite complex part and I couldn't isolate this problem to be testable for you. I will try to reproduce it in jsfiddle again, but I fear it won't work as it should have to. Anyway, it's interesting that this problem only comes up in that specific case that I had explained. Since that case doesn't happen too much, the whole script fulfills its purpose, but of course, it would be great if I could find a solution and eliminate this issue. Somehow there is no problem until I don't do any resize. I couldn't find what would cause that issue. It is strange that the space for those widgets of the main grid are kept correctly and even the x position stays correct for all the widgets, only the y position becomes incorrect. More strange that everything goes back to normal when I do any reposition. Is it possible that resizing changes some option or variable that causes positioning to not calculate correctly? I haven't dived into your code too much, so I'm just guessing. Thanks anyway. 2017. máj. 6. 22:08 ezt írta ("radiolips" <notifications@github.com>):

…

Hey, @PrincessOfSecret <https://github.com/PrincessOfSecret> ! Your screenshots look very interesting! Thanks for providing all of that code, but could you put together a jsfiddle with an example of the problem? That's the easiest way for me to be able to verify the problem and make sure I'm able to fix it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#655 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOi6okg0mTgUbBVB_pPSTYmi2UT3HSYmks5r3NM_gaJpZM4NQTuU> .

[radiolips]

I wonder how many different languages use gridstack :). I don't know that I can definitely help, but if you want to email me directly at dylan.weiss@gmail.com, I can maybe look more directly at your code. I'm also interested to hear how it's being used! Looks like maybe it's for a hotel?

[carlsch]

I had a similar problem and solved it by moving the element before removing it.
grid.move($elem, 0, 0);
grid.removeWidget($elem);

[PrincessOfSecret]

Thank you, @carlsch , this trick has solved my problem, too. :)

[kreintjes]

Had the same problem over here with GridStack 0.3.0, even without having nested grids (just a simple single grid; problem only occurred in specific configurations of widgets though). I can confirm the fix of @carlsch was working (thanks!).

However, when upgrading to GridStack 0.4.0 everything just works, even without the hack. So I would suggest upgrading to 0.4.0 as well @PrincessOfSecret and @carlsch.

@radiolips thanks for the new version!