I'm new to jQuery UI and i want to use the dialog box. But i ran into a problem.

I want to change the standard width value to be "auto", but for some reason this doesn't work.

(I change it in the following function)

2. $.widget( "ui.dialog", {
3. version: "1.10.0",
4. options: {
5. appendTo: "body",
6. autoOpen: true,
7. buttons: [],
8. closeOnEscape: true,
9. closeText: "close",
10. dialogClass: "",
11. draggable: true,
12. hide: null,
13. height: "auto",
14. maxHeight: null,
15. maxWidth: null,
16. minHeight: 150,
17. minWidth: 150,
18. modal: false,
19. position: {
20. my: "center",
21. at: "center",
22. of: window,
23. collision: "fit",
24. // Ensure the titlebar is always visible
25. using: function( pos ) {
26. var topOffset = $( this ).css( pos ).offset().top;
27. if ( topOffset < 0 ) {
28. $( this ).css( "top", pos.top - topOffset );
29. }
30. }
31. },
32. resizable: false,
33. show: null,
34. title: null,
35. width: 700,
36. 
    
37. // callbacks
38. beforeClose: null,
39. close: null,
40. drag: null,
41. dragStart: null,
42. dragStop: null,
43. focus: null,
44. open: null,
45. resize: null,
46. resizeStart: null,
47. resizeStop: null
48. },

I always have to set the width to false in the following function.

2. $(function(){
4. $( "#dialog" ).dialog({
5. autoOpen: true,
6. modal: true,
7. draggable: false
8. });
9. });

Nor does anything happen when I want to edit the height, resizable and the other options. 

But what am i doing wrong?

Do I have to change it somewhere else?

Thanks in advance guys