1

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.

JSFiddle

chobo
  • 29,453
  • 35
  • 118
  • 182

4 Answers4

2

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

Martin
  • 10,845
  • 8
  • 46
  • 77
  • +1 I have never realized they included the link to allow you to edit the theme, the number of times I have wanted to change one or two bits on a theme but not wanted to do all selections again!! – Scoobler Mar 24 '11 at 23:24
2

Your css is missing the dialog code.

  • Either add:
/* 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; }
Community
  • 1
  • 1
Scoobler
  • 9,538
  • 4
  • 34
  • 51
2

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

http://jsfiddle.net/dcc5A/3/

check them from the left corner under "Manage Resources"

please mark as answer if it helped you.

Mohammed Swillam
  • 8,682
  • 3
  • 33
  • 45
  • That fixed the example, but I don't get why my code isn't working on my machine. I have included both jquery 1.5.1 min, jquery 1.8.11.js and css file. – chobo Mar 24 '11 at 23:45
  • Ok, I copied the css file form your link and I was missing a ton of stuff. – chobo Mar 24 '11 at 23:46
0

Could be because jsFiddle does not include CSS or images in it's implementation of jQuery UI?

mattsven
  • 19,239
  • 8
  • 62
  • 102