fix: position menu absolute in control bar

to prevent taking space
muxinc · Sep 10, 2024 · d96f305 · d96f305
1 parent cfa066c
commit d96f305
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/examples/vanilla/control-elements/media-captions-menu.html b/examples/vanilla/control-elements/media-captions-menu.html
@@ -46,7 +46,6 @@ <h1>Captions Menu</h1>
           <track label="Subs Russian" kind="subtitles" srclang="ru" src="../vtt/elephantsdream/captions.ru.vtt"></track>
           <track label="Subs Arabic" kind="subtitles" srclang="ar" src="../vtt/elephantsdream/captions.ar.vtt"></track>
         </video>
-        <media-captions-menu anchor="auto" hidden></media-captions-menu>
         <media-control-bar>
           <media-play-button></media-play-button>
           <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
@@ -55,6 +54,7 @@ <h1>Captions Menu</h1>
           <media-time-range></media-time-range>
           <media-time-display showduration remaining></media-time-display>
           <media-captions-button></media-captions-button>
+          <media-captions-menu anchor="auto" hidden></media-captions-menu>
           <media-captions-menu-button></media-captions-menu-button>
           <media-fullscreen-button></media-fullscreen-button>
         </media-control-bar>

diff --git a/src/js/media-control-bar.ts b/src/js/media-control-bar.ts
@@ -28,6 +28,10 @@ template.innerHTML = /*html*/ `
     ::slotted(media-clip-selector) {
       flex-grow: 1;
     }
+
+    ::slotted([role="menu"]) {
+      position: absolute;
+    }
   </style>
 
   <slot></slot>