Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-03 20:34:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2740 from Wilto/dialog-max-width

Browse source 
Fixes #2729 — Sets a max-width of ~600px on dialogs.
This commit is contained in:
Mat Marquis 2011-10-18 12:06:47 -07:00
commit 112b3f6f51
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/structure/jquery.mobile.dialog.css
View file

@ -4,6 +4,7 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-dialog { min-height: 480px; }
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { margin: 15px; position: relative; }
.ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; width: auto; }
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { max-width: 500px; margin: 15px auto; padding: 15px; width: 85%; position: relative; }
.ui-dialog .ui-header { padding: 0 15px; }
.ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; }
.ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px; }

10
docs/pages/page-dialogs.html
View file

@ -67,6 +67,16 @@
<p>And dialogs can be can used more like a control sheet to offer multiple buttons by removing the header:</p>
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
<p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). To override this, use the following CSS in your theme:</p>
<code>
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer { <strong>max-width: 100%;</strong> }
</code>
</div><!--/content-primary -->