javascript - Jquery's Resizable Div's Width and Height turns to 0 when resize - Stack Overflow

admin管理员组

文章数量:1023758

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?

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?

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-resizable

Share Improve this question Follow edited Dec 28, 2015 at 3:38 asked Dec 28, 2015 at 3:28 user4621642user4621642 8

• 4 Post the CSS for the parent, or the entire table and children – Phiter Commented Dec 28, 2015 at 3:36
• @Eliyah #Parent must have width and height property. See jsfiddle/k26gz8pd – Mohammad Commented May 3, 2016 at 8:47
• 3 Does work jsfiddle/k26gz8pd/1 ? – Mohammad Commented May 3, 2016 at 9:12
• 2 bro add css and other details as fiddle showing ur exact problem – codefreaK Commented May 4, 2016 at 12:14
• 2 The fiddle shared by @Mohammad seems to work fine. you need to share a minimal reproducible example so that we can see the problem – T J Commented May 6, 2016 at 12:23

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

Try to add this CSS:

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

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.

<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

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?

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?

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-resizable

Share Improve this question Follow edited Dec 28, 2015 at 3:38 asked Dec 28, 2015 at 3:28 user4621642user4621642 8

• 4 Post the CSS for the parent, or the entire table and children – Phiter Commented Dec 28, 2015 at 3:36
• @Eliyah #Parent must have width and height property. See jsfiddle/k26gz8pd – Mohammad Commented May 3, 2016 at 8:47
• 3 Does work jsfiddle/k26gz8pd/1 ? – Mohammad Commented May 3, 2016 at 9:12
• 2 bro add css and other details as fiddle showing ur exact problem – codefreaK Commented May 4, 2016 at 12:14
• 2 The fiddle shared by @Mohammad seems to work fine. you need to share a minimal reproducible example so that we can see the problem – T J Commented May 6, 2016 at 12:23

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

Try to add this CSS:

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

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.

<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

本文标签： javascriptJquery39s Resizable Div39s Width and Height turns to 0 when resizeStack Overflow