jQuery UI dialog width & height based on screen width & height

Question

Currently (jQuery 1.4.4 and UI 1.8.8) I used the following to set a dialog's properties: (I'm trying to set the dialog to be 180px less than the height and width of the screen.)

$("#dialog").dialog({ 
            bgiframe: true,
            position: 'center',
            width: $(window).width()-180,
            height: $(window).height()-180,
            title: ititle,
            modal: true,
            buttons: { "Close": function() { $(this).dialog("destroy"); }}
});

The above works fine in FF but in IE 8 it fails.

Is this the right way to set width and height or should I be doing something differently?

Mike · Accepted Answer · 2014-01-22 23:52:03Z

16

This worked for me in IE8:

var winW = $(window).width() - 180;
var winH = $(window).height() - 180;

$( "#dialog" ).dialog({
    autoOpen: false,
    height: winH,
    width: winW,
    modal: true
});

You'll need this at the top of your page though

<!DOCTYPE html>

edited Jan 22, 2014 at 23:52

Mike

24.6k14 gold badges84 silver badges93 bronze badges

answered Sep 21, 2012 at 20:17

usr-bin-drinking

3122 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gregg · Accepted Answer · 2011-01-18 16:53:39Z

5

You probably need to specify the DOCTYPE and use standards mode for it to work correctly.

answered Jan 18, 2011 at 16:53

Gregg

36k22 gold badges115 silver badges221 bronze badges

Collectives™ on Stack Overflow

jQuery UI dialog width & height based on screen width & height

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related