resizestop reports old size #398

Activity

1. amxbc commented on Apr 14, 2016

   

   amxbc

   on Apr 14, 2016

   Author

   More actions

   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!
2. amxbc commented on Apr 14, 2016

   

   amxbc

   on Apr 14, 2016

   Author

   More actions

   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!
3. jaapz commented on May 13, 2016

   

   jaapz

   on May 13, 2016

   Contributor

   More actions

   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?
4. radiolips commented on Aug 16, 2016

   

   radiolips

   on Aug 16, 2016

   Member

   More actions

   @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!
5. radiolips

   added

   status:need more info

   on Aug 18, 2016
6. minhtq1207 commented on Aug 31, 2016

   

   minhtq1207

   on Aug 31, 2016

   More actions

   @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?
7. minhtq1207 commented on Aug 31, 2016

   

   minhtq1207

   on Aug 31, 2016

   More actions

   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.
8. DapengNi commented on Oct 11, 2016

   

   DapengNi

   on Oct 11, 2016

   More actions

   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
9. schnaser commented on Oct 11, 2016

   

   schnaser

   on Oct 11, 2016

   More actions

   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.
10. schnaser commented on Oct 12, 2016

    

    schnaser

    on Oct 12, 2016

    Last edited by schnaser

    More actions

    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.
11. radiolips commented on Apr 21, 2017

    

    radiolips

    on Apr 21, 2017

    Member

    More actions

    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.
12. radiolips

    closed this as completedon Apr 21, 2017