How to avoid large looking dialog header in jquery ui?

Question

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 name looks really big, see this jsFiddle for an example.

If there is a way to make this look more like a version in jQuery demo ?

Answer 1

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

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

Answer 2

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

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

Answer 3

The reason it looks good on the jQuery user interface site is because they use CSS styles to style the header. If you look at their source, you will 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 an example using this stylesheet: http://jsfiddle.net/WwVgn/5/

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

Answer 4

I think that you are just using a different theme with a large dialog header font. Try creating a new one from http://jqueryui.com/themeroller/ .

Answer 5

Just add this css bit:

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