When I open up a dialog the styling seems kind of messed up. The close icon is not where it should be, the borders look too big. Here is a link in JsFiddle
I am using JQuery 1.5.1 and JQuery-ui-1.8.11.
When I open up a dialog the styling seems kind of messed up. The close icon is not where it should be, the borders look too big. Here is a link in JsFiddle
I am using JQuery 1.5.1 and JQuery-ui-1.8.11.
It doesn't look like you have any of the CSS for the dialog. There is a link in your CSS file, go to that link, then choose download Theme, and make sure you choose dialog under the widgets before you click "Download".
Your css is missing the dialog code.
/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
Or you can use the theme roller to make your own css, make sure you tick the options you need.
Or you can use one of the standard theme's, you can even use it from the Google CDN
chobo, the problem with your sample was missing the required JS and CSS files to perform the Dialog action.
please review this link as I've fixed your sample to include the required files
check them from the left corner under "Manage Resources"
please mark as answer if it helped you.
Could be because jsFiddle does not include CSS or images in it's implementation of jQuery UI?