missing css styles for jquery ui dialog

[GoogleCodeExporter]

Which DJANGO-VERSION are you using?
r16208 - 1.3 stable

Which GRAPPELLI-VERSION are you using?
2.3

In grappelli is missing css style for JQuery UI dialog.

After adding this, it works:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; 
}
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.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 { position: relative; 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 .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: 
pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 
3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

Original issue reported on code.google.com by jan.cesp...@gmail.com on 26 May 2011 at 10:11

• Merged into: #205

[GoogleCodeExporter]

where in the admin-interface/grappelli do you have a dialog? I don´t think 
we´re using the dialog anywhere, are we?

Original comment by sehmaschine on 26 May 2011 at 10:27

[GoogleCodeExporter]

Hello, 

thing is, that you're using jquery UI and we are not sure what kind of 
functionalities (and it's CSS) you're using in Grappelli. 

We are customizing nearly in all of our projects djangoAdmin and now we started 
to play with Grappelli. Becouse we are used to do lot of UI/JS/AJAX 
customizations in project administrations we would need to understand better 
how you implement jQuery UI into your project. Seems you don't implement full 
jQuery UI, however - you have dialog functionalities in JS included, but not in 
CSS. So this makes the thing for us quite unclear.

We would appreciate any help or specification how you deal with jQuery (UI) 
libraries, if you customizing it in anyway, or what set of functionalities 
you're exporting for your purpose (so we know, how we can expand library, if we 
will need any other functionlities from UI).

Thank you very much,
Radek Pilmaier

Original comment by coex...@gmail.com on 26 May 2011 at 11:55

[GoogleCodeExporter]

you say that we "have dialog functionalities in JS included" ... where?

right now, what we´re using from jqueryUI (and what is styled) is:
– datepicker
– tabs and accordion
– sortables

that said, there´s a ticket 
(http://code.google.com/p/django-grappelli/issues/detail?id=205) for making a 
ui-skin.

Original comment by sehmaschine on 26 May 2011 at 12:12

[GoogleCodeExporter]

Simply, when you call $("#dialog").dialog() - it works. It generates dialog, 
which is broken by missing CSS styles. So I guess that means, you have (maybe 
accidentaly?) included in jQuery UI package dialog function? Maybe it's simply 
not possible to completly seperate it from other functionalities? I'm not sure.

If I uderstand well ticket #205 - you're going to implement full jQuery UI 
support?

Original comment by coex...@gmail.com on 26 May 2011 at 12:37

[GoogleCodeExporter]

yes, dialog is included in the UI-package. but that´s just for you to style it 
yourself. we currently don´t use dialog-functions.

about ticket #205: yes, we _might_ implement full jQuery UI support. but we 
don´t know when and it´s also influenced by the further development of the 
original admin-interface.

I´m merging this with 205.

Original comment by sehmaschine on 26 May 2011 at 12:47

• Changed state: Duplicate

[GoogleCodeExporter]

Ok, so just once more question to make it clear for us - can you describe 
(write a list) of functionalities you have included into jQuery UI and how (if) 
you have modified it (for exemple CSS styles). Thanks one more time.

Original comment by coex...@gmail.com on 26 May 2011 at 12:53

[GoogleCodeExporter]

@axel: can you answer that last question (because I´m not able to).

Original comment by sehmaschine on 26 May 2011 at 12:58

[GoogleCodeExporter]

Hello, any chance giving us some more info at that  point? Thank you, rp.

Original comment by coex...@gmail.com on 30 May 2011 at 7:48

[GoogleCodeExporter]

All jQuery UI styles used in Grappelli 2.3 are based on the following two 
css-files:

/jquery/ui/css/custom-theme/jquery-ui-1.8.custom.css
/css/jquery-ui-grappelli-extensions.css

There are currently styles for (just take a look at those two css-files):
– Datepicker
– Parts of Sortables
– Accordion (not fully tested as currently not in use)
– Tabs (not fully tested as currently not in use)

What you can do if you need more functions/styles:
– load your custom jQuery UI stylesheets in the context where you need them
– load a different complete jQuery UI theme and just make sure that it 
doesn't interfere with the grappelli jquery-ui-css

Regards, Axel

Original comment by parsch.inc@gmail.com on 30 May 2011 at 8:46