Now showing the dropdown menu in the body. This fixes styling problem…

…s on pages with elements with inappropriate z-indexes, like the Mozilla Design Challenge page.
joedeveloper · Oct 13, 2010 · f6dd576 · f6dd576
1 parent 55744e3
commit f6dd576
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/media/css/mirosubs-widget.css b/media/css/mirosubs-widget.css
@@ -2701,20 +2701,18 @@ background: #666 url("../images/gradient_light.png") 0 0px repeat-x !important;
 
 
 .mirosubs-dropdown {
+  font-family: Arial, Helvetica, sans-serif !important;
+  font-size: 12px !important;
     position: absolute !important;
     z-index: 500;
-    /*top: 415px !important; */
-    left: 0 !important;
-border: 1px solid #000;
-border-top: 0;
-width: 100%;
-min-width: 500px;
-background: #000;
-
+   border: 1px solid #000;
+   border-top: 0;
+   width: 480px;
+   min-width: 500px;
+   background: #000;
   -moz-box-shadow: 0 3px 14px #333;
   -webkit-box-shadow: 0 1px 0px #a7c3c9, inset 0 1px 0px #d1dd6f;
   box-shadow: 0 1px 0px #a7c3c9, inset 0 1px 0px #d1dd6f;
-
 }
 
 

diff --git a/media/images/about-poster.png b/media/images/about-poster.png
diff --git a/media/js/widget/dropdown.js b/media/js/widget/dropdown.js
@@ -364,7 +364,22 @@ mirosubs.widget.DropDown.prototype.hide = function() {
 };
 
 mirosubs.widget.DropDown.prototype.show = function() {
+    var anchor = this.videoTab_.getMenuAnchor();
+    // This is a little hacky so that we can position the menu with minimal
+    // flicker.
+
+    // On IE, setting visibility = 'hidden' on a visible menu
+    // will cause a blur, forcing the menu to close immediately.
+    this.getElement().style.visibility = 'hidden';
+
     goog.style.showElement(this.getElement(), true);
+
+    var c = goog.positioning.Corner;
+    goog.positioning.positionAtAnchor(
+        anchor, c.BOTTOM_LEFT,
+        this.getElement(), c.TOP_LEFT);
+
+    this.getElement().style.visibility = 'visible';
     this.shown_ = true;
 };
 

diff --git a/media/js/widget/videotab.js b/media/js/widget/videotab.js
@@ -60,6 +60,10 @@ mirosubs.widget.VideoTab.prototype.enterDocument = function() {
         listen(this.nudgeElem_, 'click', this.nudgeClicked_);
 };
 
+mirosubs.widget.VideoTab.prototype.getMenuAnchor = function() {
+    return this.anchorElem_;
+};
+
 mirosubs.widget.VideoTab.prototype.showLoading = function() {
     this.imageElem_.src = this.spinnerGifURL_;
     goog.dom.setTextContent(this.spanElem_, "Loading");

diff --git a/media/js/widget/widget.js b/media/js/widget/widget.js
@@ -121,7 +121,7 @@ mirosubs.widget.Widget.prototype.initializeState_ = function(result) {
     this.videoTab_.showContent(popupMenu.hasSubtitles(),
                                subtitleState);
 
-    this.addChild(popupMenu, true);
+    popupMenu.render(this.getDomHelper().getDocument().body);
     goog.style.showElement(popupMenu.getElement(), false);
 
     popupMenu.setCurrentSubtitleState(subtitleState);