Changing the height using JQuery UI resizable() can also affect the width during resizing

Question

Changing the height using JQuery UI resizable() can also affect the width during resizing

Having an issue with resizing here. Using the JQuery .resizable() on a div with specific css:

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

This div contains various other elements. Attaching the resizable like this:

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

The widgetResizeListener() currently just logs to console.

When trying to change the height by dragging the ui-resizable-s side, it automatically adjusts the width by approximately 30px. This occurs every time I begin dragging, causing the desired width to be lost. The same issue happens when adjusting the width and affecting the height.

Wondering if this is due to the padding of the div? Previously, without padding, these "jumps" did not occur. However, removing the padding is not an option as it serves a purpose. Is there a way to account for padding within JQuery resizable()?

Any assistance would be greatly appreciated. Thank you...

jquery css jquery-ui resizable jquery-resizable

Answer 1

Answer №1

In my opinion, the issue arises from using both box-sizing: border-box; and adding padding. This combination seems to interfere with the resizable function.

You could experiment by reverting back to default box-sizing (box-sizing: content-box), or consider placing an inner container for the padding instead.

Answer 2

In my opinion, the issue arises from using both box-sizing: border-box; and adding padding. This combination seems to interfere with the resizable function.

You could experiment by reverting back to default box-sizing (box-sizing: content-box), or consider placing an inner container for the padding instead.

Answer 3

Answer №2

For situations where removing the box-sizing property is not feasible, I discovered an alternative solution that may be helpful. While it may not be the most elegant, it gets the job done. Although I have not tested the exact code, the concept involves adding padding widths while resizing and then reverting back when resizing stops. It's important to note that if the element does not have padding, you will need to add an if statement to determine if a padding value is set.

var padLeft, padRight, padTotal; // declare variables 

$('#resize').resizable({

start: function(event, ui){
   padLeft = this.css('padding-left').replace('px', '');
   padRight = this.css('padding-right').replace('px', '');
   padTotal = parseFloat(padLeft + padRight);
   ui.size.width = ui.size.width + padTotal;
},
resize: function(event, ui){
   ui.size.width = ui.size.width + padTotal;
},
stop: function(event, ui){
   this.css('width', ui.size.width - padTotal); 
}

});

Answer 4

For situations where removing the box-sizing property is not feasible, I discovered an alternative solution that may be helpful. While it may not be the most elegant, it gets the job done. Although I have not tested the exact code, the concept involves adding padding widths while resizing and then reverting back when resizing stops. It's important to note that if the element does not have padding, you will need to add an if statement to determine if a padding value is set.

var padLeft, padRight, padTotal; // declare variables 

$('#resize').resizable({

start: function(event, ui){
   padLeft = this.css('padding-left').replace('px', '');
   padRight = this.css('padding-right').replace('px', '');
   padTotal = parseFloat(padLeft + padRight);
   ui.size.width = ui.size.width + padTotal;
},
resize: function(event, ui){
   ui.size.width = ui.size.width + padTotal;
},
stop: function(event, ui){
   this.css('width', ui.size.width - padTotal); 
}

});

Answer 5

Answer №3

Although this issue may be considered outdated, I recently encountered the same problem due to utilizing the Foundation library, which automatically applies box-sizing border-box to all elements. To resolve it, a simple adjustment in the jQuery UI resizable widget code is required. The solution lies within

_mouseCapture

I have implemented the following code snippet:

var padLeft = el.css('padding-left').replace('px','');
var padRight = el.css('padding-right').replace('px','');
var padTotal = parseFloat(Number(padLeft) + Number(padRight));

this.originalSize = this._helper ? { width: el.outerWidth() + padTotal, height: el.outerHeight() + padTotal } : { width: el.width() + padTotal, height: el.height() + padTotal};

Adjustments may need to be made to the height values, depending on whether the resizable was applied directly to the foundation container for each grid element or a nested div inside. This could involve including or excluding the height adjustment.

If you are interested in modifying the jQuery widget without altering the core library, you can refer to this resource for guidance, although I have not yet successfully achieved this:

How to extend a jquery ui widget ? (1.7)

I am encountering errors in the subsequent functions of the resizable object. Any suggestions on resolving this issue would be greatly appreciated.

Answer 6

Although this issue may be considered outdated, I recently encountered the same problem due to utilizing the Foundation library, which automatically applies box-sizing border-box to all elements. To resolve it, a simple adjustment in the jQuery UI resizable widget code is required. The solution lies within

_mouseCapture

I have implemented the following code snippet:

var padLeft = el.css('padding-left').replace('px','');
var padRight = el.css('padding-right').replace('px','');
var padTotal = parseFloat(Number(padLeft) + Number(padRight));

this.originalSize = this._helper ? { width: el.outerWidth() + padTotal, height: el.outerHeight() + padTotal } : { width: el.width() + padTotal, height: el.height() + padTotal};

Adjustments may need to be made to the height values, depending on whether the resizable was applied directly to the foundation container for each grid element or a nested div inside. This could involve including or excluding the height adjustment.

If you are interested in modifying the jQuery widget without altering the core library, you can refer to this resource for guidance, although I have not yet successfully achieved this:

How to extend a jquery ui widget ? (1.7)

I am encountering errors in the subsequent functions of the resizable object. Any suggestions on resolving this issue would be greatly appreciated.

Answer 7

Answer №4

When dealing with situations where box-sizing:border-box is necessary, we have found a unique solution to address this issue.

Within the resizeable callback implementation: 1. We switch to box-sizing:content-box during the start phase 2. Reverting back to box-sizing:border-box during the stop phase

This approach involves temporarily changing the box-sizing property to content-box while resizing in order to prevent any disruptive jumping behavior that may occur when border-box is utilized.

Answer 8

When dealing with situations where box-sizing:border-box is necessary, we have found a unique solution to address this issue.

Within the resizeable callback implementation: 1. We switch to box-sizing:content-box during the start phase 2. Reverting back to box-sizing:border-box during the stop phase

This approach involves temporarily changing the box-sizing property to content-box while resizing in order to prevent any disruptive jumping behavior that may occur when border-box is utilized.

Answer 9

Answer №5

If you encounter this issue, utilize the 'handles' parameter to resolve it. Here is an example:

$( "#resizable" ).resizable({handles: 'e,w'});

Answer 10

If you encounter this issue, utilize the 'handles' parameter to resolve it. Here is an example:

$( "#resizable" ).resizable({handles: 'e,w'});

Changing the height using JQuery UI resizable() can also affect the width during resizing

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for successfully passing the event in a jQuery function

Responsive breakpoints in TailwindCSS seem to have an issue with applying padding and margin styles properly

Issues with loading content in jQuery's ajax() function

Symfony2: Making AJAX request that unexpectedly returns complete html page

Using JQuery to create an animated slideToggle effect for a multicolumn list

Highchart displays text centrally on legend hover

Steps for adding an onclick function to a collection of div elements

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

What is causing the spinner with CSS rotation transform to bounce rhythmically?

Is there a way to deactivate specific options within the "Select" component on Material-UI, similar to how it is done in the "Autocomplete" feature?

Utilizing Struts 2 to Manage HTTP Array Parameters through Ajax Requests

Issues with the Content Editable Functionality

Is there a way to create a PHP function that can process an AJAX request and return a boolean value?

I am experiencing the issue of unexpected borders showing up on the HTML/CSS page that I designed

Guide to positioning elements in CSS

Unable to generate a vertical navigation bar

Determine if a div contains an svg element with JavaScript

Colorful radial spinner bar

Switch the secondary menu to be the main menu on all pages excluding the homepage in WordPress

Unpredictable jQuery modal form activation occurring twice