CODEWITHSUNDEEP
jqueryparentresizable
Hussein
Hussein

Reputation: 42808

jquery Change Child Deminsions to match Parents after resize

I have a parent div with a child div inside. The parent div is using jquery Ui resizable. How can i make the child div inherent the parent div dimensions in real time when parent div is resized.

Here's what i have http://jsfiddle.net/dtxhe/7/

After resize, the child div is not resizing according to it's parent.

Upvotes: 4

Views: 4916

Answers (4)

CronosS
CronosS

Reputation: 3159

You can also use this :

http://jsfiddle.net/dtxhe/11/

Code :

$("#container").resizable({ alsoResize: '#child' });

Upvotes: 7

Stephen
Stephen

Reputation: 18964

You must bind to the resize event, like so: http://jsfiddle.net/bWMxm/2/

Upvotes: 0

Chandu
Chandu

Reputation: 82893

You can change the size of the child to fit parent in the $.resize event. e.g(changed the code to reduce jquery selector calls):

$("#container").resize(function(){
    var $this = $(this);
    var parentwidth = $this.innerWidth();
    var parentheight = $this.innerHeight();
   $("#child").css({'width':parentwidth, 'height':parentheight});
});
$("#container").resizable();
$("#container").resize();

Working example: http://jsfiddle.net/Chandu/dtxhe/9/

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

You need to utilize the resize event of the resizable object.

http://jsfiddle.net/dtxhe/10/

$("#container").resizable({
   resize: function(event, ui) {
       var parentwidth = $("#container").innerWidth();
       var parentheight = $("#container").innerHeight();
       $("#child").css({'width':parentwidth, 'height':parentheight});
   }
});

Upvotes: 2

Related Questions