Skip to main content

Search and Top Navigation

#7948 closed feature (fixed)

Opened December 13, 2011 10:00AM UTC

Closed December 07, 2012 07:55PM UTC

Dialog: Allow dialog to be attached to a element other than body.

Reported by: lukoff Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:

When dialogs are created they are moved to the end of the body. When using YUI reset-fonts-grids (and possibly other frameworks), dialog should be placed under #bd to look properly. I use following workaround:


I think it should be implemented via "parent" option so that one can pass an element under which dialog will be moved when created.

Attachments (0)
Change History (10)

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:1

type: enhancementfeature

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:2


Changed October 15, 2012 06:36PM UTC by petersendidit comment:3

status: newopen
summary: Dialog may implement parent element optionDialog: Allow dialog to be attached to a element other than body.

Changed November 18, 2012 09:16PM UTC by jzaefferer comment:4

scott.gonzalez, we explicitly decided not to add an appendTo option. What about this usecase?

Changed November 19, 2012 10:48PM UTC by jzaefferer comment:5

From irc: "Why did we decide not to add appendTo?" - we didn't need it for the ui-front stacking implementation, as everything should go on the body and "stack" there.

Here the usecase is about inheriting styles from a non-body parent element.

Changed November 30, 2012 11:33AM UTC by jzaefferer comment:6

Is this usecase enough to justify an appendTo option? It probably also applies to Themeroller's scope option, where you also need a parent element that's a descendant from body.

Changed November 30, 2012 12:38PM UTC by mikesherov comment:7

I think it's fine to leave this open a bit longer and see if anyone else has a different use case for it. But my gut says that adding this option doesn't seem to make sense when the workaround is so simple compared to the frequency of this use case.

Changed December 05, 2012 12:05PM UTC by jajo comment:8

Another use case where this would be helpful is when using dialog with the Full Screen API.

At the moment if you have an element other than body in full screen the dialog does not appear when added. I tried to create a jsFiddle ( to show this but because the site uses iframes you cannot use the Full Screen APIand I do not have a server I could place it on.

To fix this you could check for the fullscreenElement when creating a dialog but as this is a very experimental feature of browsers I think it would probably be worth waiting until it is better supported and standardised. So I think the best way to address it would be to add the appendTo option and then people using the full screen API would be able to decide where to place dialogs when they create them, which is what I am currently doing.

Changed December 05, 2012 01:22PM UTC by jzaefferer comment:9

You can render the fiddle without a frame:

I've modified your example to show that appending the dialog to the fullscreened element fixes it:

That along with the scoping issues seems argument enough to me to add this option. It'll be consistent with other popup widgets, too.

Changed December 07, 2012 07:55PM UTC by Scott González comment:10

resolution: → fixed
status: openclosed

Dialog: Added appendTo option. Fixes #7948 - Dialog: Allow dialog to be attached to a element other than body.

Changeset: 70b16ef445d8f9947fd414894d97673706ee8c6f