Opened 5 years ago

Closed 4 years ago

#7948 closed feature (fixed)

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.

Change History (10)

comment:1 Changed 5 years ago by scottgonzalez

  • Type changed from enhancement to feature

comment:2 Changed 4 years ago by scottgonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:3 Changed 4 years ago by petersendidit

  • Status changed from new to open
  • Summary changed from Dialog may implement parent element option to Dialog: Allow dialog to be attached to a element other than body.

comment:4 Changed 4 years ago by jzaefferer

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

comment:5 Changed 4 years ago by jzaefferer

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.

comment:6 Changed 4 years ago by jzaefferer

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.

comment:7 Changed 4 years ago by mikesherov

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.

comment:8 Changed 4 years ago by jajo

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.

comment:9 Changed 4 years ago by jzaefferer

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.

comment:10 Changed 4 years ago by Scott González

  • Resolution set to fixed
  • Status changed from open to closed

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

Changeset: 70b16ef445d8f9947fd414894d97673706ee8c6f

Note: See TracTickets for help on using tickets.