jQuery UI Resizable never reaches the full width with aspect set-CodePudding

I am using jQuery ui resizable with an aspect ratio set to 16/9.

$(".select").resizable({
                containment: "#container",
                aspectRatio: 16 / 9,
                grid: 1,
                stop: function (e, ui) {},
            });

I want to be able to drag the resizable element full width to match the container but if never quite reaches it see this image.

You should notice the gap far right.

Here is a working demo I am testing with.

https://output.jsbin.com/cimorikefu/2/

I want to be able to drag the element full width any suggestions?

CodePudding user response：

What you encounter seems to be caused by combination of miscalculations in jQuery UI Resizable plugin. It's hard to label those as 'bugs': when it was written, the code worked just fine.

Some of those issues are covered in the ticket created 9 (!) years ago. The last message there was written 5 years ago, so there's little chance of fixing that; the world has moved on.

Here's the suspicious parts of the code (1.12 source is analyzed):

// in _mouseStart()
this.sizeDiff = {
   width: el.outerWidth() - el.width(),
   height: el.outerHeight() - el.height()
};

// ... in resize()
woset = Math.abs( that.sizeDiff.width   // ... )

This part seems to ignore the fact that elements might have different box-sizing models, always attempting to process those based on content-box - and take border width into account.

While the behavior of outerWidth() and width() has been corrected in jQuery 1.8, the corresponding adjustments didn't reach Resizable source in time. Now the PR prepared and listed in the linked ticket is no longer applicable (after the code has been refactored in ~1.10).

Still, there's more:

if ( woset   that.size.width >= that.parentData.width ) {
  that.size.width = that.parentData.width - woset;
  if ( pRatio ) {
    that.size.height = that.size.width / that.aspectRatio;
    continueResize = false;
  }
}

// ...

if ( !continueResize ) {
  that.position.left = that.prevPosition.left;
  that.position.top = that.prevPosition.top;
  that.size.width = that.prevSize.width;
  that.size.height = that.prevSize.height;
}

In this case pRatio is set, which means whenever your resizing operation is about to make the resizable object the same size as container, its width is reset to the previous size. So if you move your mouse fast enough, the resizable element gets stuck way before the hitting the container's borders.

While the first issue here might be mitigated a bit by replacing border with outline when styling .ui-widget-content, the only way to fix the second part is to fix the plugin's code.