Fix position and width of select menu

Add InsideSmallContainer variant to SelectV2 stories
scality · Dec 5, 2023 · eab0f28 · eab0f28
1 parent 803435c
commit eab0f28
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/lib/components/selectv2/SelectStyle.ts b/src/lib/components/selectv2/SelectStyle.ts
@@ -122,6 +122,9 @@ const SelectStyle = styled(Select)`
   }
 
   .sc-select__menu {
+    position: fixed;
+    width: ${({ width }) => width};
+    top: auto;
     border: ${spacing.r1} solid
       ${({ isDefault }) =>
         getThemePropSelector(isDefault ? 'border' : 'selectedActive')};

diff --git a/stories/selectv2.stories.tsx b/stories/selectv2.stories.tsx
@@ -109,3 +109,20 @@ export const RoundedVariant = {
     options: defaultOptions,
   },
 };
+
+export const InsideSmallContainer = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        height: '30vh',
+        alignItems: 'flex-end',
+      }}
+    >
+      <CustomSelect {...args}></CustomSelect>
+    </div>
+  ),
+  args: {
+    options: optionsWithoutSearchBar,
+  },
+};