I am using jQuery UI 1.8 and have the following code:

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there');
$(newDiv).attr('title','Dialog Title');
$(newDiv).css('font-size','62.5%');
$(newDiv).dialog();

For some reason the Title looks really big, see this jsFiddle for an example.

If there any way to make this look more like the version in the jQuery demo?

I am using jQuery UI 1.8 and have the following code:

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there');
$(newDiv).attr('title','Dialog Title');
$(newDiv).css('font-size','62.5%');
$(newDiv).dialog();

For some reason the Title looks really big, see this jsFiddle for an example.

If there any way to make this look more like the version in the jQuery demo?

• javascript
• jquery
• jquery-ui

5 Answers 5

you can use this css rule to apply smaller font size:

.ui-dialog{font-size: 62.5%;}

.ui-dialog-title {
    font-size:14px !important;
}

http://jsfiddle.net/WwVgn/6/

The reason it looks good on the jQuery UI site is that they are using CSS style sheets to style the title bar. If you view their source, you'll see...

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

I updated your JSFiddle with the example using this stylesheet: http://jsfiddle.net/WwVgn/5/

In any case, if you want to create your own style, head over to the jQuery UI themeroller website and you can easily customize and then export the stylesheets to use for yourself.

I think you are simply using a different theme which has a large dialog title font. Try creating a new one with http://jqueryui.com/themeroller/.

Just add this bit of css:

.ui-dialog-titlebar {
    font-size: 80%;
}