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

Question

Is it possible to fix the width and height of the jQueryMobile dialog box? Currently, the width is 100%, which is really terrible on the iPad.

Answer 1

You can set the width of the dialog page, 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 2

I had a similar problem, I needed to control the size of the dialog box and do modeless ones - so that the back page is visible at the back. Fil's method works fine, however you need to make the background container transparent, and also make the calling page in the DOM and still visible (starting from beta 2, the DOM is automatically cropped, so the page that calls the dialog is removed from the DOM when you show the dialog)

The first step was to make the overlay transparent for any theme you use, for example

 .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 it is cached in the DOM by adding data-dom-cache="true" to your call page, and I found that you also had to override the display and z-index styles (and of course , width) to make sure that it remains visible behind the dialog, for example

 <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:

Another possible way to adjust the width / height is found, you can simply change the dialog fields;

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

You still need to do what I mentioned to keep the previous page behind!

Answer 3

I did this in addition to Mike’s suggestion, the background page is visible, only closed by the dialog box, not the background of the dialog box.

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

Answer 4

Consider sharing an update with RC2 . Now max-width is used as 500px by default with the ability to edit by default. This refers to the problem that you have encountered with large screens. http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

It’s also a similar concept, like Mike, and I'm still setting it up. But to create an overlay dialog with a visible background, you need to: 1. delete the background color and the image of the .ui dialog box. 2. Make sure the display of the calling page is block 2. Set the opacity of the calling page to 50%. It also (at least in Chrome 14) resolved any z-index issues that I had automatically!

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

Where the class that I added to the div from which the dialog is called is inactive. You will need to check that the inactive class has overstepped the default display: none; although it may have used some javascript to add inline style.

Answer 5

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

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

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

If you do not want to apply this parameter globally, you can target a separate page / dialog with its identifier, for example:

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