CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Shai UI
Shai UI

Reputation: 51978

How to avoid big looking dialog title in jquery ui?

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?

Upvotes: 6

Views: 10583

Answers (5)

regality
regality

Reputation: 6554

Just add this bit of css:

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

Upvotes: 0

Rui Jiang
Rui Jiang

Reputation: 1672

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/.

Upvotes: 0

JasCav
JasCav

Reputation: 34652

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.

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78006

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

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

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78580

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

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

Upvotes: 10

Related Questions