diff --git a/Parts/DropDown.tsx b/Parts/DropDown.tsx
index 70b1fef..08fc808 100644
--- a/Parts/DropDown.tsx
+++ b/Parts/DropDown.tsx
@@ -1,6 +1,7 @@
import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react";
import { createPopper, Placement } from "@popperjs/core";
import { usePopper } from 'react-popper';
+import { Portal } from "@mantine/core";
import styled from "styled-components";
import tw from "twin.macro"
@@ -118,22 +119,26 @@ let Dropdown = React.forwardRef(({ children, dropdownCss = null, onValueChanged
{button}
- {dropdownPopoverShow &&
{ setOverDropDown(true); hover && await openDropdownPopover() }}
- onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
- style={styles.popper}
- {...attributes.popper}
- css={[
- dropdownPopoverShow ? tw`block` : tw`hidden`,
- tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
- dropdownCss,
- (props as any).css
- ]}
- >
- {childrenWithProps}
-
}
+ {dropdownPopoverShow && (
+
+ { setOverDropDown(true); hover && await openDropdownPopover(); }}
+ onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover(); }}
+ style={{ ...styles.popper, zIndex: 99999 }}
+ {...attributes.popper}
+ css={[
+ dropdownPopoverShow ? tw`block` : tw`hidden`,
+ tw`bg-trinary text-base float-left rounded-xl overflow-hidden text-left shadow-2xl border border-secondary`,
+ dropdownCss,
+ (props as any).css
+ ]}
+ >
+ {childrenWithProps}
+
+
+ )}
>
);