Question

I am using JQuery UI script which contains all the modules, including a custom theme. I’ve create a simple modal dialogue using the dialog() function. The problem is that when the dialog appears, the area of the title is too big, and the ‘x’ (for closing the window) appears underneath the area of the title. I need to know what causes this and if it can be fixed.

Here’s is an image the demonstrates it:

title too big http://dl.dropbox.com/u/12004956/2011-08-06_155144.png

If I write a string for the title, it appears above the ‘x’ line.

The original should appear like in this demo:
http://jqueryui.com/demos/dialog/#animated

I’ve tried:

1) .ui-widget
{
font-family:Arial;
font-size: 10px;
}

2) applying smaller font size to the container’s DIV, but it still doesn’t solve it.

Thanks.

Answer 1

Without seeing your code, I am guessing it’s your jQuery UI js or css files that are having problems. Try to use shared js and css and see if the problem is resolved. This link has shared jQuery UI libraries. For example, you can link to jQuery UI files hosted on Google:

• http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js
• http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css

If that does not work, post your code on jsfidder. I have created a demo: http://jsfiddle.net/william/YXkxn/1/