Make JQuery dialog content 100% width and height

Question

I create a div and then open it in a dialog. I've tried styling this div to achieve that the content would expand to 100% in both directions.

What have I tried so far: Setting the div style

#content {
    width:auto !important;
    height:auto !important;
    background-color:red !important;
    display:block !important;
}

and setting the default div style

$(div).dialog({ dialogClass: 'someStyle' });

.someStyle .ui-dialog-content 
{
    height:auto !important;
    display:block !important;
}

Nothing seems to work! I overrides the width propertie but cannot override the height propertie. How to hack this?

I want to achieve something like this: http://jsfiddle.net/S3FQv/

Solution 1

You could use the jQuery width and height properties to get the pixel width of the viewport and apply those as a style to the div

var w = $(window).width();
var h = $(window).height();

//Set up the dialog with the width and height set above.
$('#myDialog').dialog({
    title: 'My Dialog',
    height: h,
    width: w
});

See this fiddle: http://jsfiddle.net/URpmR/2/

You should also add some extra code to reexecute the function should the user change the size of his browser:

$(window).resize(myFunction());

Solution 2

In order for content to have 100% height, this height must be specified on the html and body tags:

html, body { height:100%; margin:0; padding:0; }

Also, setting auto doesn't necessarily mean the width and/or height will be 100%. Equally, older versions of IE do not support width: auto; and height: auto;

If possible you shouldn't use !important to overwrite existing styles, either.

JSFiddle example.

Comments

[James Donnelly]

No idea why this was downvoted... I even provided a working example!

[harryg]

@James answer is good. As it's a dialog I assume it is positioned on top of the other content on the page via display:relative or absolute. A fiddle would be good to see an example

[Jacob]

The html, body properties and removing important didn't do the trick!

[James Donnelly]

Well I'd presume you were using !important to ensure those styles overwrote existing styles. Add !important back in and see if it works then. If not, ensure that your dialog isn't wrapped in a container which is set to have less than 100% height and width.

[Jacob]

I sucessuly override height value if set the value to "px" but in % or value:auto soes't work.

[James Donnelly]

jsfiddle.net/S3FQv/19 perhaps? I'm not sure if that's what you wanted resizing, however.

[harryg]

You are already using jQuery to call the dialog. Why not just apply its height and width at the same time using my method above. See this fiddle: jsfiddle.net/URpmR

[Sudip Pal]

I have adviced Jacob the same thing in his previous question stackoverflow.com/questions/15132096/…

[Sudip Pal]

Good work, I know you have spend your time on it. Appriciated.