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

12 posts by 3 authors in: Forums > CMS Builder
Last Post: September 12   (RSS)

By Codee - September 5 - edited: September 5

I have a new client website using CMSB (ver 3.71) and discovered a glitch that we can reproduce at will on his Acer laptop, but I am unable to on my desktop PC.  When dragging the uploaded photo thumbnails to reorder them, he could drag one to the top and then ABOVE the fields display box and it lands and stays above the header bar (which has "Drag" "Preview" and "Details"). The quick correction is to refresh the page or exit out of the record - which resets it.  I have included a screen shot of the result here.  It's really freaky and, as mentioned, it can be done over and over at will on his Acer laptop; even after a reboot (because I was thinking maybe it's an issue with the graphics card or the laptop's medium-ware and not cmsb).  

It wouldn't bother me too much BUT this client is also one that had problems last summer with the drag/drop function not usable on an iPad so it decreases the client's trust in the system. (fyi: Dave and crew fixed and patched the iPad issue).  

Any ideas or thoughts on this? Thank you in advance.

Attachments:

1screenshot-glitcha.jpg 135K

By Dave - September 5

Hi Codee, 

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

Dave Edis - Senior Developer
interactivetools.com

By Tim - September 5 - edited: September 5

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. 

Tim Hurd
Senior Web Programmer
Interactivetools.com

By Codee - September 5

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

Thank you.

By Codee - September 5

Hi Dave,

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

By Dave - September 6

Hi Codee, 

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

Dave Edis - Senior Developer
interactivetools.com

By Codee - September 6

Thanks, Dave. Much appreciated.

By Tim - September 9

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!
Tim Hurd
Senior Web Programmer
Interactivetools.com

By Codee - September 10

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.