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

autoresize, css, jquery-ui, jquery-ui-dialog, width

Solution

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

Problem

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?

Original source