Width in percentage not working after jQuery resizing it's parent

Question

I have a div which I want to be 100% width of it's parent dialog.

#content {
    width: 100%;
    color:white;
    background: red;
}

It should this property if I manually resize the dialog, however after manually resizing, if i use the animate() on the dialog, it will keep the old-resized width.

The same applies to height.

HERE is a good jsFiddle which better explains the problem.

How can I have the div keeping it's proportions?

How does jQuery update the width and height (when I manually resize) maintaining the proportions?

EDIT:

---

I wanted the gray background to be filling the whole dialog no matter what. Here is my updated jsfiddle demonstrating this: http://jsfiddle.net/Esh5h/1/

EDIT 2:

---

I've found a functional but very ugly way of accomplishing it: JSFIDDLE

The trick is resizing both the dialog and its .children(".ui-dialog-content")

EDIT 3:

---

Can't I just replicate the exact same function that jQuery uses to resize it?

Answer 1

I looked at this again and inspecting the elements it is now clear to me what is happening.

As soon as you manually re-size the dialog jQuery injects a style attribute with fixed values, similar to this:

<div id="dialog" style="width: 376px; min-height: 99px; height: 282px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
</div>

Then when you animate it the style interfere with your intended result.

Removing the style attribute before you animate seems to be working, similar to this:

$("#content").click(function () {
    $("#dialog").attr("style", "").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150);
});

---

DEMO - Moving left and top to the bottom

---

Edit

That style attribute will keep giving you issues. After removing it, when then again manually re-sizing it injects them again, messing with your expected results.

The only way I found to get around this is to keep remivng them on resize:

$("#dialog").on("dialogresize", function(){
    $(this).attr("style", "");
});

Edit

I wanted the gray background to be filling the whole dialog no matter what.

That seems to be an issue with your CSS selector.

Change this:

.ui-dialog .ui-dialog-content {
    background : #cacaca;
}

to this:

.ui-dialog {
    background : #cacaca;
}

In addition you still have the issue that the injected style attributes will mess up your intended styles and using the above mentioned code which remove the style attribute on re-size as well as when you animate fixes that.

---

DEMO - Gray background fills dialog and injected style attribute removed at all times

DEMO - Same as above but without the empty-container element

---