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/

harryg · Answer 1 · 2013-02-28T12:17:17.160

14

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());

edited Feb 28 '13 at 12:17

answered Feb 28 '13 at 10:40

harryg

23,311
45
125
198

@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 – harryg Feb 28 '13 at 10:48
1

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: http://jsfiddle.net/URpmR/ – harryg Feb 28 '13 at 12:03
I have adviced Jacob the same thing in his previous question http://stackoverflow.com/questions/15132096/style-jquery-dialog-content-div#comment21299126_15132096 – Sudip Pal Feb 28 '13 at 12:06
Good work, I know you have spend your time on it. Appriciated. – Sudip Pal Feb 28 '13 at 12:18

score 1 · Answer 2 · answered Feb 28 '13 at 10:32

1

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.

answered Feb 28 '13 at 10:32

James Donnelly

126,410
34
208
218

No idea why this was downvoted... I even provided a working example! – James Donnelly Feb 28 '13 at 10:43
The html, body properties and removing important didn't do the trick! – Jacob Feb 28 '13 at 11:04
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. – James Donnelly Feb 28 '13 at 11:06
I sucessuly override height value if set the value to "px" but in % or value:auto soes't work. – Jacob Feb 28 '13 at 11:10
1

http://jsfiddle.net/S3FQv/19/ perhaps? I'm not sure if that's what you wanted resizing, however. – James Donnelly Feb 28 '13 at 11:53

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

Set the width option to 'auto' as found on this Answer

edited May 23 '17 at 12:00

Community

1
1

answered Jun 06 '16 at 23:33

Muhammad Omar ElShourbagy

6,718
2
32
50

Make JQuery dialog content 100% width and height

3 Answers3