fix accordion overflow

elastic · Jan 11, 2020 · 7353aaa · 7353aaa
1 parent 1493d48
commit 7353aaa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 25 deletions.
diff --git a/...ck/legacy/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx b/...ck/legacy/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx
@@ -51,7 +51,7 @@ interface QueryBarDefineRuleProps {
 
 const StyledEuiFormRow = styled(EuiFormRow)`
   .kbnTypeahead__items {
-    max-height: 14vh !important;
+    max-height: 45vh !important;
   }
   .globalQueryBar {
     padding: 4px 0px 0px 0px;

diff --git a/...cy/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx b/...cy/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx
@@ -59,13 +59,12 @@ const getStepDefaultValue = (
   }
 };
 
-export const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
+const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   defaultValues,
   descriptionDirection = 'row',
   isReadOnlyView,
   isLoading,
   isUpdateView = false,
-  resizeParentContainer,
   setForm,
   setStepData,
 }) => {
@@ -192,7 +191,6 @@ export const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
             dataTestSubj: 'detectionEngineStepDefineRuleQueryBar',
             openTimelineSearch,
             onCloseTimelineSearch: handleCloseTimelineSearch,
-            resizeParentContainer,
           }}
         />
         <FormDataProvider pathsToWatch="index">

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/index.tsx
@@ -27,26 +27,17 @@ import * as i18n from './translations';
 
 const stepsRuleOrder = [RuleStep.defineRule, RuleStep.aboutRule, RuleStep.scheduleRule];
 
-const ResizeEuiPanel = styled(EuiPanel)<{
-  height?: number;
+const MyEuiPanel = styled(EuiPanel)<{
+  zIndex?: number;
 }>`
+  position: relative;
+  z-index: ${props => props.zIndex}; /* ugly fix to allow searchBar to overflow the EuiPanel */
+
   .euiAccordion__iconWrapper {
     display: none;
   }
   .euiAccordion__childWrapper {
-    height: ${props => (props.height !== -1 ? `${props.height}px !important` : 'auto')};
-  }
-  .euiAccordion__button {
-    cursor: default !important;
-    &:hover {
-      text-decoration: none !important;
-    }
-  }
-`;
-
-const MyEuiPanel = styled(EuiPanel)`
-  .euiAccordion__iconWrapper {
-    display: none;
+    overflow: visible;
   }
   .euiAccordion__button {
     cursor: default !important;
@@ -57,7 +48,6 @@ const MyEuiPanel = styled(EuiPanel)`
 `;
 
 export const CreateRuleComponent = React.memo(() => {
-  const [heightAccordion, setHeightAccordion] = useState(-1);
   const [openAccordionId, setOpenAccordionId] = useState<RuleStep>(RuleStep.defineRule);
   const defineRuleRef = useRef<EuiAccordion | null>(null);
   const aboutRuleRef = useRef<EuiAccordion | null>(null);
@@ -220,7 +210,7 @@ export const CreateRuleComponent = React.memo(() => {
           isLoading={isLoading}
           title={i18n.PAGE_TITLE}
         />
-        <ResizeEuiPanel height={heightAccordion}>
+        <MyEuiPanel zIndex={3}>
           <EuiAccordion
             initialIsOpen={true}
             id={RuleStep.defineRule}
@@ -247,14 +237,13 @@ export const CreateRuleComponent = React.memo(() => {
                 isLoading={isLoading}
                 setForm={setStepsForm}
                 setStepData={setStepData}
-                resizeParentContainer={height => setHeightAccordion(height)}
                 descriptionDirection={'column'}
               />
             </StepContentWrapper>
           </EuiAccordion>
-        </ResizeEuiPanel>
+        </MyEuiPanel>
         <EuiSpacer size="s" />
-        <MyEuiPanel>
+        <MyEuiPanel zIndex={2}>
           <EuiAccordion
             initialIsOpen={false}
             id={RuleStep.aboutRule}
@@ -287,7 +276,7 @@ export const CreateRuleComponent = React.memo(() => {
           </EuiAccordion>
         </MyEuiPanel>
         <EuiSpacer size="s" />
-        <MyEuiPanel>
+        <MyEuiPanel zIndex={1}>
           <EuiAccordion
             initialIsOpen={false}
             id={RuleStep.scheduleRule}