Can I fix the width and the height of jQueryMobile dialog?

Question

Can I fix the width and the height of jQueryMobile dialog? Currently, the size of width is 100% which is really awful in iPad.

Answer 1

I'm not sure if this has changed recently; but I thought I would offer an answer for jQuery Mobile 1.1.

To fix the width all dialogs, you need to add the following CSS rule:

.ui-dialog-contain { 
    max-width: 600px;
}

If you don't want to apply this setting gobally, you can target an individual page/dialog with it's id, eg:

#my-dialog .ui-dialog-contain { 
    max-width: 600px;
}

Answer 2

I had a similar issue, I needed to control the size of a dialog and make non-modal - so that the background page is visible behind. Phil's method works great, however you need to make the background container transparent AND also make the calling page remain in the DOM and still visible (as of beta 2, the DOM is automatically pruned so the page that called the dialog is removed from the DOM when you show the dialog)

The first step was to make the containing overlay transparent, for whatever theme your using, e.g.

.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
    background-color: transparent;
    font-family: Helvetica, Arial, sans-serif;
}

Then to keep the calling page visible, make sure its cached in the DOM by adding the data-dom-cache="true" to your calling page, and I found you also had to override the display and z-index styles (and of course the width) to make sure it remained visible and behind the dialog, e.g.

<div id='homePage' data-role="page" data-theme='a' data-dom-cache="true" style='display:block !important;z-index: 0;width:300px'>

    <div data-role="header" data-theme='a'><h1>Header</h1></div><!-- /header -->

    <div data-role="content" data-theme='a' style='margin:0; padding: 0'>   
        <a href="#testdialog" data-role="button"  data-rel="dialog" data-transition="pop">Open Dialog</a>
    </div><!-- /content -->

</div><!-- /page -->

You can also cache every page in the DOM, rather than adding data-dom-cache="true" to each page, by calling;

$.mobile.page.prototype.options.domCache = true;

But that seems pretty heavy.

Edit:

Found another possible way to adjust the width/height, you can just modify the margins of the dialog;

.ui-dialog .ui-header, 
.ui-dialog .ui-content, 
.ui-dialog .ui-footer {
    margin-left: 100px;
    margin-right: 100px;
}

You'll still need to do the stuff I mentioned about keeping the previous page visible behind!

Answer 3

I did this in addition to Mike's suggestion, the background page is visible, only covered by the dialog box, and not the dialog box's background.

.ui-dialog { 
    min-height: 480px;
    background-color: transparent;
    background-image: none;
}

Answer 4

You can set the page width of the dialog, Live example: http://jsfiddle.net/bXPTd/3/

<div data-role="page" id="bar">
   <a href="#foo" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>  

</div>

<div data-role="page" id="foo" style="width:300px;">
    Hello Foo
    <a href="#" data-role="button" data-rel="back">Close dialog</a>
</div>

Answer 5

Thought to share Update as of RC2- max-width is now defaulted to 500px with an option to edit the default. This addresses the issue you were having with large screens.http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

Also, similar concept as Mike, and I'm still tweaking this one- But to create an overlay dialog with a visible background you need to 1. remove the background color & image of the .ui-dialog 2. Make sure the calling page display is block 2. Set the opacity of the calling page to 50%. This also (at least in Chrome 14) resolved any z-index issues I was having automatically!

.ui-dialog{ background: none;}
.inactive{ opacity: .50; display: block;}

Where inactive is a class I added to the div where the dialog was called from. You'll need to check to make sure the inactive class is trumping the default display: none; though, and possibly use some javascript to add inline styling.