Resizing does not work as expected

[pjc0247]

Subject of the issue

Resizing does not work as expected

Your environment

1.0.0 and Chrome

Steps to reproduce

https://pjc0247.github.io/bugtest/index.html

Expected behaviour

Size should follow the user input.

Actual behaviour

The object grows larger than expected.

[awjae]

Temporary Quick Solution

Check gridstack.all.js cdn file
https://cdn.jsdelivr.net/npm/gridstack@1.0.0/dist/gridstack.all.js

Edit function
function t(e, t) { f.$el.append(f.placeholder); var i = g(this); f.engine.cleanNodes(), f.engine.beginUpdate(u), d = f.cellWidth(); var n = f.cellHeight(); c = f.$el.height() / parseInt(f.$el.attr("data-gs-current-row")), f.placeholder.attr("data-gs-x", i.attr("data-gs-x")).attr("data-gs-y", i.attr("data-gs-y")).attr("data-gs-width", i.attr("data-gs-width")).attr("data-gs-height", i.attr("data-gs-height")).show(), u.el = f.placeholder.get(0), u._beforeDragX = u.x, u._beforeDragY = u.y, u._prevYPix = t.position.top; var o = u.minHeight || 1, s = f.opts.verticalMargin; f.dd.resizable(h, "option", "minWidth", d * (u.minWidth || 1)), f.dd.resizable(h, "option", "minHeight", n * o + (o - 1) * s), "resizestart" === e.type && i.find(".grid-stack-item").trigger("resizestart") }

TO

function t(e, t) { f.$el.append(f.placeholder); var i = g(this); f.engine.cleanNodes(), f.engine.beginUpdate(u), d = f.cellWidth(); var n = f.cellHeight(); c = (f.$el.height() + grid.verticalMargin()) / parseInt(f.$el.attr("data-gs-current-row")), f.placeholder.attr("data-gs-x", i.attr("data-gs-x")).attr("data-gs-y", i.attr("data-gs-y")).attr("data-gs-width", i.attr("data-gs-width")).attr("data-gs-height", i.attr("data-gs-height")).show(), u.el = f.placeholder.get(0), u._beforeDragX = u.x, u._beforeDragY = u.y, u._prevYPix = t.position.top; var o = u.minHeight || 1, s = f.opts.verticalMargin; f.dd.resizable(h, "option", "minWidth", d * (u.minWidth || 1)), f.dd.resizable(h, "option", "minHeight", n * o + (o - 1) * s), "resizestart" === e.type && i.find(".grid-stack-item").trigger("resizestart") }

It change
c = f.$el.height() / parseInt(f.$el.attr("data-gs-current-row"))
->
c = (f.$el.height() + grid.verticalMargin()) / parseInt(f.$el.attr("data-gs-current-row"))

[adumesny]

by the way you can use non min files (to help debug) like the git demos (just change to URL)

<script src="../src/jquery.js"></script>
<script src="../src/gridstack.js"></script>
<script src="../src/jquery-ui.js"></script>
<script src="../src/gridstack.jQueryUI.js"></script>

You can also reproduce with our demo https://gridstackjs.com/demo/float.html
Funny thing is I recall fixing a similar issue where margin wasn't taken into account before... maybe I missed that one, or got reverted???

do you mind putting a code review fix ? that would be great!

[adumesny]

fixed in next release