jQuery UI - Dynamically set minHeight of resizable element

Question

I have a resizable element with a draggable and resizable element inside it.

There is no maxHeight to the resizable element but I want to set the minHeight to be the height of the child element plus the position from the top.

Setting a constraint on the size of a child based on it's parent is simple enough but not a parent based on it's children.

Here's my code:

HTML:

<div id="resizable">
    <div class="draggable"></div>
</div>

jQuery:

var buildMinHeight = 0;
$("#resizable").resizable({
    start: function(e, ui) {
        $(".draggable").each( function() {
            buildMinHeight = ($(this).height()+$(this).position().top > buildMinHeight) ? $(this).height()+$(this).position().top : buildMinHeight;
        });
    }, 
    minHeight: buildMinHeight // THIS IS NOT BEING SET - GUESSING I MIGHT NEED TO SET IT WITHIN THE START EVENT
});

$(".draggable").resizable({
    containment: "#resizable"
}).draggable({
    containment: "parent"
});

Initial CSS:

 #resizable {
      width: 250px;
      height: 250px;
      background:red;
  }
  .draggable {
      width:150px;
      height:150px;
      background:blue;
  }

And here's a jsfiddle... http://jsfiddle.net/many_tentacles/vKLB4/2/

Answer 1

You have to use the css property of your outer object in the start function :

$("#resizable").css({
    minHeight: buildMinHeight,
});

the complete javascript code will look like this :

var buildMinHeight = 0;
$("#resizable").resizable({
    start: function (e, ui) {
        $(".draggable").each(function () {
            buildMinHeight = ($(this).height() + $(this).position().top > buildMinHeight) ? $(this).height() + $(this).position().top : buildMinHeight;
            $("p").html(buildMinHeight);
        });
        $("#resizable").css({
            minHeight: buildMinHeight,
        });
    }
});

$(".draggable").resizable({
    containment: "#resizable"
});

$(".draggable").draggable({
    containment: "parent"
});