improve the logic of our dropdown positioning

decaporg · Dec 6, 2017 · a923ed8 · a923ed8
1 parent 4fca039
commit a923ed8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/components/App/Header.js b/src/components/App/Header.js
@@ -65,8 +65,9 @@ export default class Header extends React.Component {
               <Dropdown
                 classNameButton="nc-appHeader-button nc-appHeader-quickNew"
                 label="Quick add"
+                dropdownTopOverlap="30px"
                 dropdownWidth="160px"
-                dropdownPosition="right"
+                dropdownPosition="left"
               >
                 {
                   collections.filter(collection => collection.get('create')).toList().map(collection =>
@@ -90,6 +91,7 @@ export default class Header extends React.Component {
                   : null
               }
               <Dropdown
+                dropdownTopOverlap="50px"
                 dropdownWidth="100px"
                 dropdownPosition="right"
                 button={

diff --git a/src/components/UI/Dropdown/Dropdown.css b/src/components/UI/Dropdown/Dropdown.css
@@ -54,8 +54,9 @@
 
 .nc-dropdownList {
   @apply(--dropdownList);
+  margin: 0;
   position: absolute;
-  top: 39px;
+  top: 0;
   left: 0;
   min-width: 100%;
   z-index: 1;

diff --git a/src/components/UI/Dropdown/Dropdown.js b/src/components/UI/Dropdown/Dropdown.js
@@ -10,10 +10,12 @@ const Dropdown = ({
   classNameButton = '',
   dropdownWidth = 'auto',
   dropdownPosition = 'left',
+  dropdownTopOverlap = '0',
   children
 }) => {
   const style = {
     width: dropdownWidth,
+    top: dropdownTopOverlap,
     left: dropdownPosition === 'left' ? 0 : 'auto',
     right: dropdownPosition === 'right' ? 0 : 'auto',
   };