Please wrap dialog in <div class="hasDialog">......</div>

5 views
Skip to first unread message

BigFoot

unread,
Sep 15, 2009, 6:30:12 AM9/15/09
to jQuery UI Development
Now dialog themes is
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-
draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-
helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog
title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span
class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;"
class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>

Please warp this with <div class="hasDialog">, so we can implement
themes on dialog more easily.

<div class="hasDialog">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-
draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-
helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog
title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span
class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;"
class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
</div>

Thanks.

Wichert Akkerman

unread,
Sep 15, 2009, 6:53:22 AM9/15/09
to jquery...@googlegroups.com
Please don't. If you need this for your specific styling you can always
wrap the dialog yourself in your javascript. Normally no extra divs are
needed.

BigFoot

unread,
Sep 15, 2009, 7:08:19 AM9/15/09
to jQuery UI Development
As .Filament Group pointed out that we can use multiple themes in one
page with additional theme class. Because ui-dialog is appended to
<body> directly, so you can not theme it with .theme .ui-dialog. If we
wrap it in <div class="hasDialog">, we can achieve more with backward-
compatibility.

Scott González

unread,
Sep 15, 2009, 9:16:49 AM9/15/09
to jquery...@googlegroups.com
There's an option called dialogClass which will add a class to the generated wrapper.

Scott Jehl

unread,
Sep 15, 2009, 10:49:27 AM9/15/09
to jquery...@googlegroups.com
Has that wrapper been implemented yet? 
When it does, it will need to:
• be consistent for all overlay-style plugins (dialog, datepicker, etc)
• given a widget-specific class for non-theme targeting (though it will be statically positioned). Something like ui-widget-overlay-wrap
• given an additional class if dialogClass option is provided, for theme scoping
• wrap all overlay-related elements, such as ui-widget-overlay, ui-widget-shadow, ui-widget-stackfix (or whatever that bgiframe element will be called)

BigFoot

unread,
Sep 15, 2009, 12:05:44 PM9/15/09
to jQuery UI Development
It's not implemented.
Now the solution is,
$("#dialog").dialog().parents('.ui-dialog:eq(0)').wrap('<div
class="start"></div>');
and
$("#datepicker").datepicker();
$("body>.ui-datepicker").wrap('<div class="redmond"></div>');

Scott Jehl

unread,
Sep 15, 2009, 12:11:46 PM9/15/09
to jquery...@googlegroups.com
Thanks. Well, we've been discussing the best way to implement this.
Ideally, overlay-style widgets will have both that wrapperClass
option, and also an appendTo option, which would allow a developer to
append the widget to an element that's already on the page.

Scott Jehl

unread,
Sep 15, 2009, 12:17:08 PM9/15/09
to jquery...@googlegroups.com
Also, the solution you mentioned would probably need to be reapplied
every time the widget is displayed, since I believe we commonly re-
append overlay-style widgets to the body every time they're opened
(for IE z-index assurance).
Reply all
Reply to author
Forward
0 new messages