PDA

View Full Version : Absolutely floating element within panel (<video> full screen)



chocis
22 Sep 2013, 9:55 AM
Hi, I am trying to implement a video player widget using Extjs. Everything has worked fine so far, until now when I need a volume control, because I want it to implement with button menu.

Without details the problem is like this - When someone wants to implement video player (based on HTML5 <video> tag) with his own controls and use the full screen option, then the layout should be something like this:
<div id="ThisWillGoFullscreen">
<video></video>
<div id="ThisContainsVideoControls"></div>
</div>

Now when requesting full screen, then it is done on "ThisWillGoFullscreen" element and everything inside it is visible in full screen (all other elements are not visible, even if they are floating over with absolute position). If the "ThisContainsVideoControls" element is positioned using absolute, then it still works, because it is inside "ThisWillGoFullscreen" element.
Now if I use button with menu element, then menu is not visible when in full screen, because Extjs creates a separate <div> element which is outside all components, but it needs to be inside "ThisWillGoFullscreen" to be visible in full screen.

So the question is like this - is it possible to tell menu element to position it absolutely, but within a specific parent element? If not, then is there a way in Extjs to create a container, than can be positioned easily next to button similar to menu (but of course it needs to be inside the "ThisWillGoFullscreen" element).

Thank you.

slemmon
1 Oct 2013, 3:50 PM
I believe the zIndex manager for floating elements will try and manage the menu element respective of its parent (button associated to the video element in this case). Is your video element wrapped in a floating panel? If not, could it be when in fullscreen mode?