fix(icon-placeholder): align icons on ie8 properly (#4174)

Make sure that the button inside the menu button element isn't a vjs-control but make sure that the icon-placeholder is sized properly.
videojs · Mar 7, 2017 · 1770f00 · 1770f00
1 parent 05e6494
commit 1770f00
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss
@@ -10,12 +10,12 @@
   width: 4em;
   @include flex(none);
 
-  & > .vjs-icon-placeholder:before {
-    font-size: 1.8em;
-    line-height: 1.67;
+}
+.vjs-button > .vjs-icon-placeholder:before {
+  font-size: 1.8em;
+  line-height: 1.67;
 
-    @extend %icon-default;
-  }
+  @extend %icon-default;
 }
 
 // Replacement for focus outline

diff --git a/src/js/control-bar/text-track-controls/subs-caps-button.js b/src/js/control-bar/text-track-controls/subs-caps-button.js
@@ -23,7 +23,6 @@ class SubsCapsButton extends TextTrackButton {
       this.label_ = 'captions';
     }
     this.menuButton_.controlText(toTitleCase(this.label_));
-
   }
 
   /**

diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js
@@ -38,6 +38,7 @@ class MenuButton extends Component {
     const buttonClass = Button.prototype.buildCSSClass();
 
     this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+    this.menuButton_.removeClass('vjs-control');
 
     this.addChild(this.menuButton_);