Glitch in image upload field - maybe on Acer laptop only?

Hi Codee, 

Thanks for the report.  Do you what browser they're using on the Acer laptop? 

Hi Codee,

I can confirm that this is a bug that is not specific to the Acer laptop and I can recreate it on my desktop across both Firefox and Chrome browsers. It is a JavaScript draggable issue. 

Having said that, I don't think it is a critical issue to fix as it doesn't appear to impact anything than being a visible glitch. I was able to save rearranged items fine and as mentioned, it is corrected with a page refresh or hitting save. It does feel a bit easier to do on Chrome though.

Do we know if this is easier to do on something like the iPad? Would be interesting to see.

I will leave it to Dave to determine where in the backlog of work this would fit. 

Thanks for reporting it! :)

Edit: I see Dave is on top of it. 

I just messaged the client to let me know. I will report back to you as soon as I hear. 

Thank you.

Hi Dave,

He was using a current version of Chrome on his Acer laptop.

Hi Codee, 

Thanks we'll do some research and post back here when we have a fix.

Thanks, Dave. Much appreciated.

Hi Codee, 

Thanks for reporting this.  I think we may have a fix for you. Can you try it by following the steps below:

1. First make a backup copy of /lib/dragsort.js

2. Open up /lib/dragsort.js and locate this code around line 47 or so...

getSortableConfig: function(onStopCallback) {
    return {
      forceHelperSize: true,
      axis: 'y',
      containment: 'parent',
      items: "tr:not(.ui-state-disabled)",
      tolerance: 'pointer',
      helper: function(event, ui) {
        return SortableUtils.fixedHelper(event, ui);
      },
      start: function(event, ui) {
        ui.placeholder.height(ui.item.height() - 1);
        $(this).sortable('refresh');
      },
      stop: function(event, ui) {
        if (onStopCallback) {
          onStopCallback(ui.item, this);
        }
      }
    };
},

Replace it with the following...

getSortableConfig: function(onStopCallback) {
    return {
      cancel: "thead",
      forceHelperSize: true,
      axis: 'y',
      containment: 'parent',
      items: "tr:not(.ui-state-disabled)",
      tolerance: 'pointer',
      helper: function(event, ui) {
        return SortableUtils.fixedHelper(event, ui);
      },
      start: function(event, ui) {
        ui.placeholder.height(ui.item.height() - 1);
        $(this).sortable('refresh');
      },
      stop: function(event, ui) {
        if (onStopCallback) {
          onStopCallback(ui.item, this);
        }
      }
    };
},

Notice that around line 49 or so we introduced...

cancel: "thead",

3. Save the file and refresh the page with the upload table on it. Try again to see if you can move the header.

Let me know if that works for you.

Thanks!

Hi Tim and those following the thread,

I just made your recommended changes and uploaded the code on to the website.  I am meeting with the client this evening and will have them test it out, and report back to you here. 

Thank you kindly for working on this issue.

Hi Codee,

Just following up. Did the client try it out? Did it fix their issue? Let us know how it went. :)