Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

set the dialog modal width for jquery ui?

Tags:

HI

I am using this demo to display a modal dialog

how do I set the width for dialog if i am using it for google street view:

var point = new GLatLng(svlat, svlon); var panoClient = new GStreetviewClient();  panoClient.getNearestPanoramaLatLng(point, function (newPoint) {   if (newPoint == null) {       alert("no panorama found for this position!!");       return;   }   panoramaOptions = { latlng: newPoint };   myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);   $('#dialogStreetView').dialog("option", "maxWidth", 600);   $('#dialogStreetView').dialog('open');   GEvent.addListener(myPano, "error", handleNoFlash); });  

HTML:

<div id="dialogStreetView" title="Street View Provided by Google... "     style="width:300px;height:300px">     <a id="closestreet-view" name="closestreet-view" style="cursor:pointer; text-   decoration:underline" >Close</a>     <div name="pano" id="pano" style="width: 300px; height: 300px"></div> </div>   
like image 895
Bart Avatar asked Nov 24 '10 04:11

Bart


People also ask

How to set jQuery dialog width?

Syntax: $( ". selector" ). dialog({ width : 120 });

How increase jQuery modal width?

You can use class 'modal-dialog' and change the width. You can change the width in success function of Ajax call.

How make jQuery ui dialog responsive?

Below is how I achieved a responsive jQuery UI Dialog. To do this, I added a new option to the config - fluid: true , which says to make the dialog responsive. I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.


2 Answers

From the docs:

  • http://docs.jquery.com/UI/Dialog

this should work:

$("#dialogStreetView").dialog( "option", "width", 460 ); 
like image 82
icyrock.com Avatar answered Oct 18 '22 16:10

icyrock.com


  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $("#myDialogBox" ).dialog({   width: 500,   autoOpen: false,   show: {     effect: "blind",     duration: 1000   },   hide: {     effect: "blind",     duration: 1000   } });  $( "#myBoxOpener" ).click(function() {   $( "#myDialogBox" ).dialog( "open" ); }); }); </script> 

====== body ======

<div id="myDialogBox" title="My Dialog Box">     <div id="myContentLayer">     <p>My Content</p>     </div> </div> <button id="myBoxOpener" class="myButton">Open Dialog Box</button> 

jsFiddle Demo

like image 33
Porta Shqipe Avatar answered Oct 18 '22 17:10

Porta Shqipe