Solve jquery ui dialog title is html display style problem

 

problematic

 

Using HTML in a Dialog's title in jQuery UI 1.10

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
        if (!this.options.title ) {
            title.html(" ");
        } else {
            title.html(this.options.title);
        }
    }
}));

 

no problem

Sample

<div id="dlgCheckRole" class="hide"></div>

 

//set role
function checkRole(userId){
	var dialog = $("#dlgCheckRole").load(contextPath+"/role/checkRole?userId="+userId).removeClass('hide').dialog({
		modal: true,
		title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i>设置角色</h4></div>",
		//title: "Set Role",
		//title_html: true,
		width: 600,
		height: 600, //auto
		buttons: [
			{
				text: "Cancel",
				"class" : "btn btn-minier",
				click: function() {
					$( this ).dialog( "close" );
				}
			},
			{
				text: "OK",
				"class" : "btn btn-primary btn-minier",
				click: function() {
					//$( this ).dialog( "close" );
					saveCheckRole();
				}
			}
		],
		close: function(){
			//Destroy dialog and inner elements
	        $(this).dialog("destroy").empty();
	    }
	});
	//set title
	//$('#dlgCheckRole').dialog("option","title", "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>");
}

 

refer to:

https://stackoverflow.com/questions/14488774/using-html-in-a-dialogs-title-in-jquery-ui-1-10