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 (e.g. 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.

Gillman

Have you tried using margin/padding right for your injected html? – Naphthalene

without seeing the generated markup I would simply suggest a margin-right to the outer div which contains the title. – Decor

Good idea, I've changed it to style='float: right; padding-right:20px'. The effect is that the text is shifted to the left, which would be enough space for the icon - but unfortunately it is not shown (and you can also not click on it). – Gillman

you have to use margin, not padding – Decor

@Fabrizio: I have tried both (padding, then margin) but with the same result. Espascarello's example in JSFiddle does it right, but in my project with the ui-lightness style all text gets right-aligned. – Gillman

Answer 1

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.

---

N.B. (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 (i.e. using $ to indicate that you want to have HTML in the title).

Gillman

Answer 2

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

Chandos

Thank you for the example. In JSFiddle it looks right. On my PC both texts appear right aligned and the title bar is 3 lines. Do you have an idea why? Is it because of the ui-lightness style? – Gillman

inspect it and see what is giving them items 100% width/ – Chandos

I've now added width: auto to both divs. Strange is: using .append(myTitle) shows the (X) but makes all text flow to the right broken into multiple lines, while doing the same with .html(myText) shows the title bar correctly but hides the (X). – Gillman

It does not "hide" the X, you are deleting it from the page. – Chandos

You are right. Note that I've now found a way which is officially supported by the jQuery developers. – Gillman