resizestop reports old size

[amxbc]

I know that this issue has been reported previously (#159) and was fixed, but for me (with a fresh clone of the git repo) this problem is still present.
The following code:
$('.grid-stack').on('resizestop', function (event, ui) {
console.debug(ui.element[0].attributes.getNamedItem("data-gs-width"));
console.debug(ui.element[0].attributes.getNamedItem("data-gs-width").value);
});
reports the size of the gridstack-item before resizing it. I checked the .js and in the top comment it says " * gridstack.js 0.2.5", so this should be fixed?

[amxbc]

I have investigated this issue. It seems (in my case) the $('.grid-stack-item').on('resizestop', ...) handler gets called before the gridstack handler (by jquery?) and the gridstack handler doesnt trigger my handler. Here is a jsfiddle: https://jsfiddle.net/2uxpbt6y/4/
Maybe I am doing something wrong here, how is the resize-handler supposed to be registered?

Thanks in advance for any help on this issue!

[amxbc]

Alright, I found something that works for me. I added an additional if statement at the end of "onEndMoving" line 1106:
if (event.type == 'resizestop') { o.trigger('resizedone'); }
This triggers a "resizedone" event and I added a handler for this in my js code. So now I get notified of the correct size after resizing.
If there is a better way to do this, I like to hear about it!

[jaapz]

Yep, running into this issue as well. Adding the resizedone event fixed it for me too.
Fix is currently in http://github.com/jaapz/gridstack.js, if the maintainer wants, I can make a pull request out of it?

[radiolips]

@amxbc @jaapz Can you both verify that this works? Some code was moved around for the events, so I believe this will be resolved. If not, my guess is that it is an animate issue, but please let me know. Thanks!

[minhtq1207]

@radiolips i also faced that problem and solution from @amxbc works for me . And'dragstop' event is similar with 'resizestop' when returns wrong size.
Could you please give me some suggestions to fix it?

[minhtq1207]

Update :
I use a small trick to pass it for now as :
$('.grid-stack').on('dragstop', function (event, ui) {
setTimeout(function () { // Update all widget position
updateAllPos(); }, 1000);
});
Thus wait for animation complete and attributes was updated. But it's not a good solution, please check and give me your solution.

[GeniusWiki]

I have same issue on this, using 0.26, init code

        var options = {
            cellHeight: 115,
            width: 6,
            float: false,
            verticalMargin: 8,
            resizable: {
                handles: 'e'
            },
        };
        this.formGrid = $('.grid-stack').gridstack(options);

Dnd resize 6 -> 5, but these lines give different results:

console.debug(ui.element[0].attributes.getNamedItem("data-gs-width"));
console.debug(ui.element[0].attributes.getNamedItem("data-gs-width").value);

->
data-gs-width="5" // expected new value
6 // old value

[schnaser]

So do I, the workaround I /was/ using was to get the size of the dashed outline through something like:

$(ui.element).siblings('.grid-stack-placeholder')[0];

but evidently that is not robust, since the outline div looks to be disappearing before my event handler fires.

[schnaser]

Bit more progress. I've been running into this issue when I've had animate turned on in the options. Waiting to run the event handler until after the animation completes seems to be a workaround.

Ex:

function redraw(event, ui) {
    //get the containing div
    var container = ui[0].el[0].firstChild;
    //do the resize (Plotly is a graphing library.)
    Plotly.relayout(container, {
        width: container.offsetWidth,
        height: container.offsetHeight
    });
}
$gridstack.on('change', function (event, ui) {
    window.setTimeout(redraw.bind(this, event, ui), 500); //wait for animation to finish
});

It would be nice though to be able to attach to jQuery UI events in a convenient way.

[radiolips]

Remember that time that I came in and fixed a ridiculously old bug that caused everyone grief? Enjoy v0.3.0!! (coming this evening)

Please reopen if it still doesn't fix the bug for you.

*Make sure to listen to gsresizestop - a new event name was required for this.