0

I've been working on a web application that, among other things, uses Google Maps API to display a map of an area with "pins" marking points of interest. When the user clicks on a pin, the application uses jQuery-UI Dialog to display information about the clicked pin in a dialog.

Later on, I decided that it might be nice to have a button the user can click on to make the map fullscreen. This was no problem for the map, but when the user clicks on a pin, he cannot see the dialog unless he exits fullscreen mode.

This is presumably because the div that holds the dialog is outside the fullscreen div that holds the map. I tried moving the div that holds the dialog inside the div that holds the map, but that doesn't work either; apparently, jQuery-UI moves the div to the end of the document.

Is there a practical way to make jQuery-UI Dialog play nice with HTML5 fullscreen? I have seen other threads about this on other sites, but I haven't found a satisfactory answer.

Vivian River
  • 31,198
  • 62
  • 198
  • 313

1 Answers1

0

By default the plugin appends your dialog <div> to the end of the body, which has the side effect of removing it from wherever you had placed it.

Using the appendTo option of .dialog you can override this behavior:

$( "#yourDialog" ).dialog({
    appendTo: "#parentElement"
});

Where "#parentElement" is your <div> that is being set fullscreen.

jmoerdyk
  • 5,544
  • 7
  • 38
  • 49
  • I've just tried this, and it isn't working. I tried doing this with the dialog `div` both inside and outside the fullscreen element, and I still see using the debugging that the dialog is being appended to the end of the document. What might I be doing wrong? – Vivian River Jan 16 '15 at 21:38
  • Poking around a little more, I found something that did work for me: I followed the `.dialog('open')` statement with `jQuery('.ui-dialog').appendTo('#parentElement')` – Vivian River Jan 16 '15 at 21:51