fix: dropdown content position

kufu · Feb 21, 2020 · 9952259 · 9952259
1 parent 8e6e4e4
commit 9952259
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/components/Dropdown/DropdownContentInner.tsx b/src/components/Dropdown/DropdownContentInner.tsx
@@ -68,8 +68,7 @@ const Wrapper = styled.div<{ themes: Theme; contentBox: ContentBoxStyle }>`
       top: ${contentBox.top};
       left: ${contentBox.left};
       border-radius: ${themes.frame.border.radius.m};
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
-        0 2px 1px -1px rgba(0, 0, 0, 0.12);
+      box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.3);
       background-color: #fff;
       white-space: nowrap;
 

diff --git a/src/components/Dropdown/dropdownHelper.ts b/src/components/Dropdown/dropdownHelper.ts
@@ -45,9 +45,9 @@ export function getContentBoxStyle(
   }
 
   if (triggerRect.bottom + contentSize.height <= windowSize.height) {
-    contentBox.top = `${scroll.top + triggerRect.bottom}px`
+    contentBox.top = `${scroll.top + triggerRect.bottom - 5}px`
   } else if (triggerRect.top - contentSize.height >= 0) {
-    contentBox.top = `${scroll.top + triggerRect.top - contentSize.height}px`
+    contentBox.top = `${scroll.top + triggerRect.top - contentSize.height + 5}px`
   } else {
     const padding = 10
 
@@ -63,9 +63,9 @@ export function getContentBoxStyle(
   const triggerAlignCenter = triggerRect.left + (triggerRect.right - triggerRect.left) / 2
 
   if (triggerAlignCenter <= windowSize.width / 2) {
-    contentBox.left = `${scroll.left + triggerRect.left}px`
+    contentBox.left = `${scroll.left + triggerRect.left - 5}px`
   } else if (triggerAlignCenter >= windowSize.width / 2) {
-    contentBox.left = `${scroll.left + triggerRect.right - contentSize.width}px`
+    contentBox.left = `${scroll.left + triggerRect.right - contentSize.width + 5}px`
   } else {
     contentBox.left = `${scroll.left + triggerRect.left}px`
   }