0

Trying to make a dialog box in jquerymobile 1.4.5 a larger width. According to an example AND the directions on http://demos.jquerymobile.com/1.4.5/pages-dialog/ I think this should work (but it doesn't seem to). I copied their example and then overrode the .ui-dialog-contain attribute as documented. I'm using a Mac/Chrome to render the page. And I have seen this post before, but I can't get anyone's solution to work. I think some of that might be because of old versions of jquerymobile. 

.ui-dialog-contain  {
 max-width: 200px;
}
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>

<div data-role="page" data-dialog="true">

  <div data-role="header" data-theme="b">
  <h1>Dialog</h1>
  </div>

  <div role="main" class="ui-content">
  <h1>Delete page?</h1>
  <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
   <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
   <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
  </div>
 </div>

</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - jQuery Mobile Demos</title>
<link href="favicon.ico" rel="shortcut icon"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<style type="text/css"> {
    .ui-dialog-contain  {
        max-width: 1500px;
    }
}
</style>
</head>
<body>

<div data-role="page" data-dialog="true">

    <div data-role="header" data-theme="b">
    <h1>Dialog</h1>
    </div>

    <div role="main" class="ui-content">
    <h1>Delete page?</h1>
    <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
        <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
        <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
    </div>
</div>

Brecky Morris
  • 221
  • 2
  • 8
  • looks fine -- https://jsfiddle.net/poyqvnw8/ -- dont forget -- jquery is before jquery mobile js in the head. also put the css file above the js scripts --- CSS then Js – Tasos Feb 17 '16 at 15:05
  • Thank you for answering @Tasos and for the correction that css goes before js. Even with rearranging the css and js files, I still can't get this example to work outside of jsfiddle. – Brecky Morris Feb 17 '16 at 21:00
  • well try adding important (max-width: 200px !important;) -- http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean – Tasos Feb 17 '16 at 21:06
  • @Tasos, That doesn't seem to fix the problem. – Brecky Morris Feb 17 '16 at 21:14
  • @Tasos, I found the problem. If I remove the curly braces between the style tags, it works. Thank you for the help! – Brecky Morris Feb 17 '16 at 21:22
  • oh yeah, i must have gone blind. you had an extra set of the curlies. :) – Tasos Feb 18 '16 at 02:00

0 Answers0