title: Expand jQuery UI Dialog with Popover
body: <p>I have a table in a jQuery UI Dialog that is filled with various data.  When the link "Select Code..." is clicked a <a href="http://twitter.github.com/bootstrap/javascript.html#popovers" rel="nofollow noreferrer">Twitter Bootstrap Popover</a> appears.  The problem is that when the popover appears it is too big to fit inside the boundaries of the jQuery UI Dialog (see image).  A scrollbar appears and I can scroll to see the rest but I'm wondering how I can just dynamically expand the Dialog to display the entire popover.  Then, when the popover is removed, by re-clicking the link, I would like the Dialog to re-size back to its original height.</p>
  
  <p>The <code>Work Orders</code> is a jQuery UI Dialog.  It is on top of a regular HTML page.  The <code>Select a code for this Work Order</code> is a Twitter Bootstrap Popover.  So, the image below shows 1 popover on top of 1 dialog on top of an HTML page.</p>
  
  <p>Here is a simple jsFiddle recreation of the problem:
  <a href="http://jsfiddle.net/AaronSalazar/aa7Jr/" rel="nofollow noreferrer"><a href="http://jsfiddle.net/AaronSalazar/aa7Jr/" rel="nofollow noreferrer">http://jsfiddle.net/AaronSalazar/aa7Jr/</a></a></p>
  
  <p><img src="https://i.stack.imgur.com/5giD8.png" alt="enter image description here"></p>
  
  <pre><code>$("#workOrdersModal").dialog({ 
      title: "Work Orders", 
      width: 1000, 
      closeOnEscape: false, 
      draggable: true, 
      resizable: true, 
      modal: true, 
      autoOpen: false 
  });
  </code></pre>