Nested grid looses verticalMargin setting when parent grid item moved (inherits parent setting)

[kool-kat]

I have a nested grid with its own verticalMargin setting, which differs to the parent (wrapper) grid.

Moving a parent grid widget results in the nested grid being redrawn with the parent margin setting not its own.

Movie showing this is attached.
nestedloosemargin.zip

My grid code:

<!--WRAPPER--><div class="myGrid" style="background: #2c3e50;">
<div class="grid-stack grid-stack-8" data-gs-animate="yes"><!--START GRID-->
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="3"><div class="grid-stack-item-content clr1">1<br/><p>Shoot me an email.</p></div></div>
<div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="2" data-gs-height="3"><div class="grid-stack-item-content clr2">2<br><strong>hello</strong><p>This is a no-brainer.</p></div></div>
<div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="3" data-gs-height="3"><div class="grid-stack-item-content clr3">3<br>hello</div></div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="3" data-gs-width="2" data-gs-height="3"><div class="grid-stack-item-content clr2">4<br>world</div></div>
<div class="grid-stack-item" data-gs-x="2" data-gs-y="3" data-gs-width="4" data-gs-height="6"><div class="grid-stack-item-content clr3"><!-- HERE--><div class="grid-inner grid-stack-2" data-gs-animate="yes"><!--START INNER GRID-->
<div class="grid-inner-item grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="3"><div class="grid-stack-item-content clr7">Inner1</div></div>
<div class="grid-inner-item grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="1" data-gs-height="3"><div class="grid-stack-item-content clr6">Inner2</div></div>
<div class="grid-inner-item grid-stack-item" data-gs-x="0" data-gs-y="3" data-gs-width="1" data-gs-height="3"><div class="grid-stack-item-content clr6">Inner3</div></div>
<div class="grid-inner-item grid-stack-item" data-gs-x="1" data-gs-y="3" data-gs-width="1" data-gs-height="3"><div class="grid-stack-item-content clr7">Inner4</div></div>
<!-- END INNER GRID --></div></div></div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="3" data-gs-width="2" data-gs-height="3"><div class="grid-stack-item-content clr9">5</div></div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="6" data-gs-width="2" data-gs-height="3"><div class="grid-stack-item-content clr0">6</div></div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="6" data-gs-width="2" data-gs-height="3"><div class="grid-stack-item-content clr8">7</div></div><!-- END GRID --></div>
<!--end wrapper--></div>

My function and options:

  $(function () {
        var options = {
             width: 8,
             verticalMargin: 3,
             cellHeight:'3.5em',
             resizable: {
                   handles: 'e, se, s, sw, w'
                              }
          };
         $('.grid-stack').gridstack(options);

var nestedoptions = {
             width:2,
             verticalMargin: 0,
             cellHeight:'3.5em',
             resizable: {
                   handles: 'e, se, s, sw, w'
                              }
          };
         $('.grid-inner').gridstack(nestedoptions);
   });

[radiolips]

@kool-kat I believe there's an existing ticket that mentions this. If I can find the ticket, I'll mention the link here and close this ticket. If not, I'll keep this open. Thanks again for logging all of these bugs - if we're unaware of the issues, we can't make the fixes.

[adumesny]

I tried latest code and modified nested.html and still happens when moving, even with fix for #425 to have copy of the options per grid.

[adumesny]

this will be fixed in upcoming 2.0 release - as you can see parent grid has 10px margin, nested 1px and that stays while dragging items around in parent or child.