Skip to main content

Search and Top Navigation

#8324 closed bug (wontfix)

Opened May 15, 2012 07:46AM UTC

Closed May 15, 2012 07:36PM UTC

Last modified May 30, 2012 02:29PM UTC

"CSS Scope" definistion not work with dialogClass

Reported by: mostowfim Owned by: mostowfim
Priority: minor Milestone: 1.9.0
Component: ui.dialog Version: 1.8.20
Keywords: Cc:
Blocked by: Blocking:
Description

When defining a CSS Scope in "Advanced Theme Settings", the "dialogClass" option for Jquery dialog not work properly.

The workaround is to edit the css and remove ".ui-dialog" from the file. it is because the .ui-dialog and dialogClass is in the same level in the generated markup for dialog.

Attachments (0)
Change History (10)

Changed May 15, 2012 12:31PM UTC by scottgonzalez comment:1

component: ui.coreui.dialog
owner: → mostowfim
status: newpending

This doesn't make any sense. The dialogClass is the scope.

Changed May 15, 2012 07:20PM UTC by mostowfim comment:2

Changed May 15, 2012 07:36PM UTC by scottgonzalez comment:3

resolution: → wontfix
status: newclosed

ThemeRoller's scoping option and dialog's dialogClass option solve the same problem, but in different ways. There's not really a good way for us to handle this.

Changed May 18, 2012 08:13AM UTC by mostowfim comment:4

it is impossible to define "css scope" in ThemeRoller for applying to "dialog" because the dialog code is generate at the end of the page and there is no surrounding DIV for assigning the class.

the ugly workaround is to use below code:

$('.ui-dialog').wrap('<div class="cssscope" />');

Changed May 18, 2012 12:41PM UTC by scottgonzalez comment:5

That's a fairly bad workaround, unless you're writing code to dynamically create and destroy the element on open and close. It also doesn't address scoping the overlay.

Changed May 30, 2012 01:17PM UTC by scottgonzalez comment:6

#8366 is a duplicate of this ticket.

Changed May 30, 2012 01:44PM UTC by frediani.adrien comment:7

Why can't we fix this? A simple solution would be to add a 'scope' option to the widget. Then we can just wrap the dialog dom node with '<div class="${option.scope}">' after it has been appended to the end of document.body. I tested locally and works fine.

line 127 of jquery.ui.dialog.js:

++ .wrap('<div class="custom_scope">'),

Changed May 30, 2012 01:45PM UTC by scottgonzalez comment:8

Adding yet another wrapper is a potentially breaking change.

Changed May 30, 2012 02:23PM UTC by frediani.adrien comment:9

_comment0: Replying to [comment:8 scott.gonzalez]: \ > Adding yet another wrapper is a potentially breaking change. \ \ Ok,any idea on what this could possibly break? Just for my information... \ \ Only thing I can see now would be cleaning this wrapped div on destroy. \ 1338387809824827

Replying to [comment:8 scott.gonzalez]:

Adding yet another wrapper is a potentially breaking change.

Ok,any idea on what this could possibly break? Just for my information...

Only thing I can see now would be cleaning this wrapper div on destroy.

Changed May 30, 2012 02:29PM UTC by scottgonzalez comment:10

It would break any script that expects specific elements to be children of .dialog( "widget" ).