title: jQueryUI dialog width
body: <p><strong><a href="http://jsfiddle.net/6FGqN/1183/embedded/result/">Fiddle Full Screen Example</a></strong></p>
  
  <p>I use jQuery dialog to open tables. Some of them have a large amount of text and they tend to be too long and go way off the screen. How can I make the dialog wider if the table is too long like the first one in the fiddle? I've tried <code>width:'auto'</code> but it seems to just occupy the entire screen.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class='label'&gt;Click&lt;/button&gt;&lt;div class='dialog'&gt;&lt;p&gt;&lt;table&gt;.....&lt;/table&gt;&lt;/div&gt;
  &lt;button class='label'&gt;Click&lt;/button&gt;&lt;div class='dialog'&gt;&lt;p&gt;&lt;table&gt;.....&lt;/table&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function(){
  
   $('.label').each(function() {
  
   var dialogopen = $(this).next(".dialog"); 
   dialogopen.dialog({width:'auto',autoOpen: false,modal: true,
              open: function(){
              jQuery('.ui-widget-overlay').bind('click',function(){
                  dialogopen.dialog('close');
              })
          }    
   });    
    $(this).click(function(){
          dialogopen.dialog('open');
           return false;
              }
          );
    });
  });
  </code></pre>