Jquery's Resizable Div's Width and Height turns to 0 when resize

Question

I have this code:

<table>
    <tr>
        <td id="parent">
            <div id="child"></div>
        </td>
    </tr>
</table>

My JavaScript code:

$('#child' ).resizable({
    animate: true,
    helper: '.ui-resizable-helper',
    maxWidth: 500,
    maxHeight: 500,     
    aspectRatio: true
});

With the above code, My resizable div works as expected but when I add containment option, the divs width and height is resize to 0, when resize in whatever direction.

   $('#child' ).resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: '#parent'
    });

Why is it happening? Is it a bug?

Post the CSS for the parent, or the entire table and children — Phiter, Dec 28 '15 at 03:36
@Eliyah `#Parent` must have `width` and `height` property. See https://jsfiddle.net/k26gz8pd/ — Mohammad, May 03 '16 at 08:47
bro add css and other details as fiddle showing ur exact problem — codefreaK, May 04 '16 at 12:14
just a suggestion: use min-width and min-height params to your div — Dirty Developer, May 06 '16 at 10:35
The fiddle shared by @Mohammad seems to work fine. you need to share a [mcve] so that we can see the problem — T J, May 06 '16 at 12:23

score 2 · Answer 1 · edited Dec 28 '15 at 04:44

2

Try to add this CSS:

#parent {
  width: 500px;
  height: 500px;
}

edited Dec 28 '15 at 04:44

Dan Lowe

51,713
20
123
112

answered Dec 28 '15 at 04:26

Niketan Raval

479
2
10

score 2 · Answer 2 · answered May 03 '16 at 19:02

2

The issue isn't with the #parent it's with the #child. Apply the following CSS so that it has a base start size.

#child {
  height:200px;
  width:200px;
}

Also you can see my fiddle here to illustrate the change using your code.

answered May 03 '16 at 19:02

Huginn

480
2
6
21

My child already had height and width. Your answer doesnt work with me :( – May 04 '16 at 06:08
1

@Eliyah so to be clear both your child and parent div have height specified in px – codefreaK May 04 '16 at 12:32
1

As @SachinDivakar stated. I didn't call out the other since it'd already been called out. With the update of both it works just fine with the code you've provided. If you're having further issues, please provide a fiddle with all of the code you're using so we can see if anything is combatting what we've been providing. – Huginn May 04 '16 at 13:02
2

@Eliyah dont waste hard earned reputation as bounty points without proper details in question .You lost your points and if you are not providing details enough to solve your problem what purpose does it server ?.If this does not work I say report it to jqueryUI and get a ticket – codefreaK May 04 '16 at 13:21

score 2 · Answer 3 · answered May 05 '16 at 20:58

<table>
    <tr>
        <td>
            <div class="child" style="border:solid 1px red;">
            </div>
        </td>
                <td>
            <div class="child" style="border:solid 1px red;">
              <p>this is a test
            </p>
            </div>
        </td>
    </tr>
</table>

Define a minimum width and height for the child

.child {
 min-width:50px;
 min-height:50px;
}

Set containment to document and add the default minHeight, minWidth values.

  var defaultHeight = $('#child').height();
  var defaultWidth = $('#child').width();
 $('.child').resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        minHeight:defaultHeight,
        minWidth:defaultWidth,
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: 'document'
    });

fiddle

Jquery's Resizable Div's Width and Height turns to 0 when resize

3 Answers3