title: jQueryUI dialog hides close (X) button if title contains right-aligned text. How can I fix this?
body: <p>I have the following code sample:</p>
  
  <pre><code>&lt;div id="dlgTest1" style="display: none"&gt;
      &lt;p&gt;
          Lorem ipsum test popup dialog&lt;br /&gt;
          &lt;br /&gt;
          Click the OK button to resume activity.
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
          var myTitle = 
          "&lt;div style='float: left'&gt;LEFT TEXT&lt;/div&gt;&lt;div style='float: right'&gt;RIGHT TEXT&lt;/div&gt;";
          $("#dlgTest1").dialog({
              title: '', //  new jquery-ui-1.10.2 doesn't allow HTML here
              autoOpen: false,
              minWidth: 500, width: 500,
              minHeight: 200, height: 200,
              resizable: true,
              modal: true,
              show: "blind",
              hide: "explode",
              buttons: {
                  "OK": function () {
                      $(this).dialog("close");
                  }
              }
          }).siblings('.ui-dialog-titlebar').html(myTitle); // title goes here
          $("#dlgTest1").dialog("open").dialog("moveToTop");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This sample code opens a jQuery dialog, which displays text in the title bar on the left side and on the right side, which is achieved by <code>myTitle</code>, a variable that contains HTML code with two <code>&lt;div&gt;</code> elements.</p>
  
  <p>In previous versions of jQueryUI (e.g. V1.8.20) I was able to directly assign the title attribute with the content of <code>myTitle</code> and it worked like a charm. Now I've upgraded to V1.10.2 and noticed that title doesn't interpret HTML any more but shows the <code>&lt;div&gt; ...</code> in the title instead.
  As you can see, I am using the tweak <code>.siblings('.ui-dialog-titlebar').html(myTitle);</code> to pass through my HTML code, which works basically. </p>
  
  <p>But it has the side effect that it hides the (X) button used to close the dialog (that side effect didn't occur in the older jQUery UI version V1.8.20). I can't go back to the earlier version of jQueryUI because I need controls that depend on the latest version.</p>
  
  <p><strong>Question:</strong> How can I avoid that the (X) close button is hidden by the right-aligned text?</p>
  
  <p><strong>Note:</strong> The icon is displayed, if I use normal text instead of HTML formatted text, so the reason is <strong>not</strong> that a style or bitmap is missing.</p>
  
  <p>I have already looked everywhere (beginning with <a href="http://jqueryui.com/" rel="nofollow">http://jqueryui.com/</a>), searched in Google etc. but found no solution. </p>
  
  <p>Any help is much appreciated.</p>
  
  <hr>
  
  <p><strong>Update:</strong> (Answers to the comments below)</p>
  
  <ul>
  <li>I am using the <strong>ui-lightness</strong> css theme without any modifications</li>
  <li>Adding <code>padding-right:20px</code> to the <code>style</code> attribute of the right-aligned <code>div</code> doesn't solve the issue.</li>
  </ul>
  
  <hr>
  
  <p><strong>Final note:</strong></p>
  
  <p>The discussion with you all helped me a lot solving the issue. I have posted the answer which finally worked for me.</p>
  
  <p>Thank you very much to all who have supported me, you guys are really great! Everyone who has posted an answer got a +1 from me.</p>