fixed dropdown menu positioning bug #275

Author: amorey

examples/css-js/dropdowns.html

@@ -24,6 +24,7 @@
       <h1>Dropdowns</h1>
       <div class="mui-panel">
         <h2>CSS</h2>
+
         <div class="mui-dropdown">
           <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
             Dropdown
@@ -36,6 +37,7 @@ <h2>CSS</h2>
             <li><a href="#">Option 4</a></li>
           </ul>
         </div>
+        
         <div class="mui-dropdown">
           <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
             Dropdown
@@ -48,6 +50,17 @@ <h2>CSS</h2>
             <li><a href="#">Option 4</a></li>
           </ul>
         </div>
+
+        <div class="mui-dropdown">
+          <a data-mui-toggle="dropdown">Click me</a>
+          <ul class="mui-dropdown__menu">
+            <li><a href="#">Option 1</a></li>
+            <li><a href="#">Option 2</a></li>
+            <li><a href="#">Option 3</a></li>
+            <li><a href="#">Option 4</a></li>
+          </ul>
+        </div>
+
       </div>
     </div>
   </body>

src/angular/dropdown.js

@@ -38,14 +38,13 @@ angular.module(moduleName, [])
             rightClass = 'mui-dropdown__menu--right',
             isUndef = angular.isUndefined,
             menuEl,
-            buttonEl;
+            buttonEl,
+            marginTop;
 
         // save references
         menuEl = angular.element(element[0].querySelector('.' + menuClass));
         buttonEl = angular.element(element[0].querySelector('.mui-btn'));
 
-        menuEl.css('margin-top', '-3px');
-
         // handle is-open
         if (!isUndef(attrs.open)) scope.open = true;
 

src/js/dropdown.js

@@ -85,13 +85,6 @@ function toggleDropdown(toggleEl) {
 
   // method to open dropdown
   function openDropdownFn() {
-    // position menu element below toggle button
-    var wrapperRect = wrapperEl.getBoundingClientRect(),
-        toggleRect = toggleEl.getBoundingClientRect();
-
-    var top = toggleRect.top - wrapperRect.top + toggleRect.height;
-    jqLite.css(menuEl, 'top', top + 'px');
-
     // add open class to wrapper
     jqLite.addClass(menuEl, openClass);
 

src/react/dropdown.jsx

@@ -30,9 +30,9 @@ class Dropdown extends React.Component {
     super(props);
 
     this.state = {
-      opened: false,
-      menuTop: 0
-    }
+      opened: false
+    };
+    
     let cb = util.callback;
     this.selectCB = cb(this, 'select');
     this.onClickCB = cb(this, 'onClick');
@@ -97,16 +97,7 @@ class Dropdown extends React.Component {
   }
 
   open() {
-    // position menu element below toggle button
-    let wrapperRect = this.wrapperElRef.getBoundingClientRect(),
-      toggleRect;
-
-    toggleRect = this.buttonElRef.buttonElRef.getBoundingClientRect();
-
-    this.setState({
-      opened: true,
-      menuTop: toggleRect.top - wrapperRect.top + toggleRect.height
-    });
+    this.setState({ opened: true });
   }
 
   close() {
@@ -175,7 +166,6 @@ class Dropdown extends React.Component {
         <ul
           ref={el => { this.menuElRef = el }}
           className={cs}
-          style={{ top: this.state.menuTop }}
           onClick={this.selectCB}
         >
           {children}

src/sass/mui/_dropdown.scss

@@ -94,6 +94,11 @@
   }
 }
 
+// margin after mui-btn
+.mui-btn + .mui-dropdown__menu {
+  margin-top: -4px;
+}
+
 // right align
 .mui-dropdown__menu--right {
   left: auto;