jQueryUI dialog hides close (X) button if title contains right-aligned text. How can I fix this?

Question

I have the following code sample:

<div id="dlgTest1" style="display: none">
    <p>
        Lorem ipsum test popup dialog<br />
        <br />
        Click the OK button to resume activity.
    </p>
</div>
<script type="text/javascript">
$(document).ready(function () {
        var myTitle = 
        "<div style='float: left'>LEFT TEXT</div><div style='float: right'>RIGHT TEXT</div>";
        $("#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");
});
</script>

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 myTitle , a variable that contains HTML code with two <div> elements.

In previous versions of jQueryUI (eg V1.8.20) I was able to directly assign the title attribute with the content of myTitle 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 <div> ... in the title instead. As you can see, I am using the tweak .siblings('.ui-dialog-titlebar').html(myTitle); to pass through my HTML code, which works basically.

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.

Question: How can I avoid that the (X) close button is hidden by the right-aligned text?

Note: The icon is displayed, if I use normal text instead of HTML formatted text, so the reason is not that a style or bitmap is missing.

I have already looked everywhere (beginning with http://jqueryui.com/ ), searched in Google etc. but found no solution.

Any help is much appreciated.

---

Update: (Answers to the comments below)

• I am using the ui-lightness css theme without any modifications
• Adding padding-right:20px to the style attribute of the right-aligned div doesn't solve the issue.

---

Final note:

The discussion with you all helped me a lot solving the issue. I have posted the answer which finally worked for me.

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.

Answer 1

The problem is you are replacing the html of the title bar so you are removing the close button.

Change html() to append() , you will need to adjust margins/padding to get it to look right.

var myTitle = 
    "<div style='float: left'>LEFT TEXT</div><div style='float: right; margin-right:10px;'>RIGHT TEXT</div>";

and

}).siblings('.ui-dialog-titlebar').append(myTitle);

JSFiddle

Answer 2

The approach Epascarello has suggested with .append(myTitle) instead of .html(myTitle) works fine in the JSFiddle example, but unfortunately not with the ui-lightness customization of jQueryUI which I am using.

But the following function does it:

// Insert HTML formatted title in jQuery dialog V1.10.2
// Parameters: 
// dialog = reference to jQueryUI dialog, 
// hmtlTitle = the title with containing HTML to apply to dialog
function applyHtmlToDialog(dialog, htmlTitle) {
    dialog.data("uiDialog")._title = function (title) { 
            title.html(this.options.title); };
    dialog.dialog('option', 'title', htmlTitle);
}

To use it, simply call it the following way:

applyHtmlToDialog($("#dlgTest1").dialog(), myTitle);

or if you prefer to do it in multiple lines:

var myDiag = $("#dlgTest1").dialog(//... your dialog definition ...
                                    );
var myTitle = '<div> ... </div>'; 
applyHtmlToDialog(myDiag, myTitle);

It will insert myTitle properly and regard the HTML codes contained within.

---

NB (Some background information): This solution was inspired by the following Stackoverflow article: Icons in jQueryUI dialog title .

I've found out the reason for this behaviour is that the jQuery team had concerns regarding XSS vulnerability of the dialog, so they have changed it on purpose.

You can read more about their discussion here , if you're interested. Hence, the _title is official functionality provided by jQuery in case you want to use HTML codes in the title. I believe they have chosen an approach which isn't so straightforward, as .dialog({ title: $("... html ...") }) , which I personally would have preferred (ie using $ to indicate that you want to have HTML in the title).