Full Screen API and Bubble Editing

SPOADMIN

I am using Full screen API to show a <div> element in full screen. The <div> element contains datatables, editor, colvis and other datatable controls.

Full screen works fine. But during " Row Edit" or cell editing (Bubble Editing), the bubble popups are not shown on the full screen
When I exit out of full screen, the popups triggered during edit are present on the window.

Is there any way I can display the popups in Full screen mode?

allan

Hi,

This is an interesting one. Since you are not using the body element to trigger the full screen, it is causing issues.

For example, consider this page

1) Run the following on the console (this is for Chrome, change as required):

$('h1').on( 'click', function () {
  document.body.webkitRequestFullscreen();
} );

Bubble editing works as expected.

2) Reload the page and now run:

$('h1').on( 'click', function () {
  $('div.fw-container')[0].webkitRequestFullscreen();
} );

The whole page is shown fullscreen rather than just the requested element, but the new position absolute element is not shown.

The inspect shows that it is present on the page, just not visible.

Given that the whole page is visible, I'm inclined to think of this as a browser bug (Firefox shows slightly different behaviour) - assuming that it is correct that it shows the whole page and not just the requested element.

The workaround for the moment would be to just trigger fullscreen on the body.

Allan

SPOADMIN

Yes you are correct. I am observing similar behaviors in firefox and IE too. I just checked.I have to stick with the workaround i guess.

Thanks a lot for the help.

allan

Out of interest, when you trigger the full screen on an element that is not the body, do you expect only that element and its children to display, or the whole page as I was seeing happening (and I presume you are as well)? I haven't looked into the specs, so I'm not sure what the correct behaviour is there, but is seems a bit odd that.

Allan

SPOADMIN

I wanted only a particular element to zoom out and display in fullscreen. I wanted to implement a distraction free view. The <div> contains a table with search, pagination, columns and bubble editing and other functions.

All popups were rendered only in background. By popup i mean, bubble editing and ColVis popup for column selection.

Full screen on Firefox and IE were even more wierd, except data table, all other elements within the div where shown with black background

SPOADMIN

Hi Allan
I found this link related to fullscreen issue
http://stackoverflow.com/questions/18578244/displaying-elements-other-than-fullscreen-element-html5-fullscreen-api

It appears Chrome sets the z-index to maximum for an element that's made full screen. So as a workaround, i set the z-index of the Edit row's container to maximum

<

div class="DTED DTED_Lightbox_Wrapper" style="opacity: 1; top: 0px; z-index: 2147483647;">

allan

Thanks for letting me know. That is interesting. I had a look through the spec but couldn't see anything conclusive...

Allan