fix: menu sizing when using longer caption labels (videojs#5228)

bcdarius · gkatsev · commit 002d7011c5b8 · 2018-06-11T13:39:47.000-04:00
Currently, if longer captions labels are used the SubsCaps menu gets all messed up in IE11/Edge. This occurs due to the menu size is not adjusted correctly not taking into consideration the CC icon. This, as a result, causes the captions items not to fit in the menu and because they end up too wide and the menu has overflow: auto style, the horizontal scrollbars show up and cause the menu not to render correctly. Therefore, don't position the caption label absolutely. Fix videojs#4758.
diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss
@@ -15,7 +15,9 @@
 }
 
 .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
-  position: absolute;
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
 }
 .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
   font-family: VideoJS;

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,9 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {`
`18`		`- position: absolute;`
	`18`	`+ vertical-align: middle;`
	`19`	`+ display: inline-block;`
	`20`	`+ margin-bottom: -0.1em;`
`19`	`21`	`}`
`20`	`22`	`.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {`
`21`	`23`	`font-family: VideoJS;`