CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-dialog
James
James

Reputation: 432

Force JQuery Dialog Title to Multiple Lines

How can I force a jQuery Dialog's Title to always be two lines?

See this: http://jsfiddle.net/VKcJ7/24/

I know the dialog title is contained in a span, so I'm not sure if this is possible. I want the 'SOME ITEM' portion to always be on the first line, and the 'Remaining qty...' portion to always be on the second line.

JS:

$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        title: 'SOME ITEM \n Remaining Qty (Cts.): 0'
        //adding the newline character \n is ignored...
    });
});

CSS:

.ui-dialog .ui-dialog-title {
    white-space:normal;
}

Upvotes: 1

Views: 3741

Answers (2)

James
James

Reputation: 432

I ended up using the answer of this question (thanks @jazZRo): Using HTML in a Dialog's title in jQuery UI 1.10 to extend the widget.

I then set my title as follows: (Working example: http://jsfiddle.net/VKcJ7/30/)

JS:

$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        title: 'SOME ITEM <br> Remaining Qty (Cts.): 0'
        //adding the newline character \n is ignored...
    });
});

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074168

Officially, I don't think you can.

The hacky way is to jam it in:

$("#dialog")
    .dialog({
      autoOpen: false
    })
    .closest(".ui-dialog")
      .find(".ui-dialog-title")
        .html("Dialog<br>Title");

Live Example | With resizable: true

jQuery UI Dialog with Multi-line title

But again, fairly hacky.

Upvotes: 0

Related Questions