From feb7e262119026c9cf116c6c1ec7a9c96aa85067 Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Wed, 9 Mar 2016 14:26:07 -0500
Subject: [PATCH] @gkatsev fixed chapters menu. Fixes #3062. closes #3163

---
 CHANGELOG.md                                              | 2 +-
 src/css/components/_chapters.scss                         | 5 -----
 src/js/control-bar/text-track-controls/chapters-button.js | 6 ++++--
 src/js/menu/menu-button.js                                | 6 ++++--
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bbad9fd2..5d6ef8830 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@ CHANGELOG
 =========
 
 ## HEAD (Unreleased)
-_(none)_
+* @gkatsev fixed chapters menu. Fixes #3062 ([view](https://github.com/videojs/video.js/pull/3163))
 
 --------------------
 
diff --git a/src/css/components/_chapters.scss b/src/css/components/_chapters.scss
index b70b018ee..91695452f 100644
--- a/src/css/components/_chapters.scss
+++ b/src/css/components/_chapters.scss
@@ -2,11 +2,6 @@
   @extend .vjs-icon-chapters;
 }
 
-.vjs-chapters-button .vjs-menu {
-  left: -10em; // (Width of vjs-menu - width of vjs-control) / 2
-  width: 0;
-}
-
 .vjs-chapters-button .vjs-menu ul {
   width: 24em;
 }
diff --git a/src/js/control-bar/text-track-controls/chapters-button.js b/src/js/control-bar/text-track-controls/chapters-button.js
index 4ec5ecd39..a885c751e 100644
--- a/src/js/control-bar/text-track-controls/chapters-button.js
+++ b/src/js/control-bar/text-track-controls/chapters-button.js
@@ -90,11 +90,13 @@ class ChaptersButton extends TextTrackButton {
     let menu = this.menu;
     if (menu === undefined) {
       menu = new Menu(this.player_);
-      menu.contentEl().appendChild(Dom.createEl('li', {
+      let title = Dom.createEl('li', {
         className: 'vjs-menu-title',
         innerHTML: toTitleCase(this.kind_),
         tabIndex: -1
-      }));
+      });
+      menu.children_.unshift(title);
+      Dom.insertElFirst(title, menu.contentEl());
     }
 
     if (chaptersTrack && chaptersTrack.cues == null) {
diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js
index faa4a27a7..d5f69b2ea 100644
--- a/src/js/menu/menu-button.js
+++ b/src/js/menu/menu-button.js
@@ -70,11 +70,13 @@ class MenuButton extends ClickableComponent {
 
     // Add a title list item to the top
     if (this.options_.title) {
-      menu.contentEl().appendChild(Dom.createEl('li', {
+      let title = Dom.createEl('li', {
         className: 'vjs-menu-title',
         innerHTML: toTitleCase(this.options_.title),
         tabIndex: -1
-      }));
+      });
+      menu.children_.unshift(title);
+      Dom.insertElFirst(title, menu.contentEl());
     }
 
     this.items = this['createItems']();