Datagrid inside of Accordion makes the filter show up at the top of the page instead of inside the Accordion

[Michael Xiourouppa]

The issue faced is that if i try to open the filter menu it spawns at the top of the page rather than inside the accordion and below the header also if i hoover over the filter it dissapears completely .I have attached a part of the code not all of the code hopefully it would help support to find see the issue i have also attached picture of the issue in question.

  const actionRaiseIncidentContent = () => { return (

); }; const blockedIPsContent = () => { return (

); }; const EDRContent = () => { return (

); }; const userSuspensionContent = () => { return (

); }; const nestedAccordion = () => { if (actions.length === 0) { return (

No automated actions available.

); } const NestedHeader = (title: string, count: number) => () => (

{title} (count: {count})

); return (

{raiseIncidentActions.length > 0 && ( )} {userSuspensionActions.length > 0 && ( )} {EDRActions.length > 0 && ( )} {blockedIPActions.length > 0 && ( )}

); }; const featureheader = () => { return (

AUTOMATED ACTIONS

); }; return (

); }; export default AutomatedActions;

[Praveen Sellappan]

Hi Michael Xiourouppa,

Greetings from Syncfusion Support.

Based on the issue you mentioned, we created a sample using the Accordion component, and inside each Accordion item we rendered the Grid component with filtering enabled. During our testing, we were not able to reproduce the behavior you described the sample worked as expected without any issues.

We understand the concern you are facing; however, we are still unclear about the exact configuration implemented in your application. To help us investigate this further, please share the following details:

1. Your Accordion and Grid configuration code.
2. Confirmation on filtering usage:
   – Are you using the built‑in Grid filtering.
   – Or are you using any custom filtering approach.
3. The Syncfusion package versions you are currently using.
4. The environment details where you tested the application (browser, framework version, OS, etc.).
5. A video recording reproducing the issue, if possible.
6. A minimal issue‑reproducible sample that reflects the problem.

These details will help us analyze the issue accurately and provide the appropriate resolution.

We look forward to your response.

Regards,

Praveen Sellappan

[Michael Xiourouppa]

1. Accordion & Grid configuration

The outer accordion wraps a nested accordion, which wraps the grid:

// Outer

<AccordionComponent expandMode="Single" className="cs-Accordion">

  <AccordionItemDirective header={featureheader} content={nestedAccordion} />

</AccordionComponent>

// Inner (inside nestedAccordion content function)

<AccordionComponent expandMode="Single" className="cs-Accordion">

  <AccordionItemDirective header={NestedHeader("Raise Alert as Incident", n)} content={actionRaiseIncidentContent} />

  ...

</AccordionComponent>

// Grid (inside each content function)

<DataGrid data={...} columns={...} cssClassName="cs-grid-automation-actions" />

---

2. Filtering approach

Built-in Syncfusion Grid filtering via filterSettings with type "Menu":

filterSettings = {

  type: "Menu",

  operators: {

    stringOperator: [{ value: "like", text: "Like" }],

    numberOperator: [{ value: "greaterThan" }, { value: "lessThan" }, { value: "equal" }],

    dateOperator: [{ value: "greaterThan" }, { value: "lessThan" }, { value: "equal" }],

  }

}

Filter is triggered via the column menu (showColumnMenu={true}, columnMenuItems={["Filter"]}). No custom filtering logic.

---

3. Syncfusion package versions

Package	Version
@syncfusion/ej2-react-grids	31.2.18
@syncfusion/ej2-grids	31.2.18
@syncfusion/ej2-react-navigations	31.2.12
@syncfusion/ej2-react-popups	31.2.12
@syncfusion/ej2-react-buttons	31.2.18
@syncfusion/ej2-react-dropdowns	31.2.18

Note: mixed versions — navigations/popups on 31.2.12, grids on 31.2.18.

---

4. Environment

Item	Detail
Framework	React 18.2.0
Build tool	Vite (ES module project)
OS	Windows
Browser	Not recorded — test across Chrome/Edge
Styling	Tailwind CSS + custom SCSS overrides
Router	React Router DOM 6.22.3

---

5. Minimal reproducible description

The app layout uses a scrollable <div> (not window scroll):

<div className="max-h-screen overflow-auto ...">

Syncfusion's popup utility adds the scroll parent's scrollTop to the calculated top, but appends the popup to <body> which has no scroll offset — so the popup renders offset upward by exactly the amount the inner div has been scrolled. Reproducible on any grid in the app when the page content is scrolled down before clicking the column menu filter.

I tried to add a video mp3 or mp4 or webvm it would not let me upload it so i cannot send a recording 

[Michael Xiourouppa]

I have made it into a gif hopefully it works 

Attachment: ScreenRecorderProject1_52f26f19.gif

[Santhosh Iruthayaraj]

Hi Michael Xiourouppa,

From the provided details, we understand that you are facing misalignment with the popup position because the popup is appended to the body element. To overcome this kind of situation, the Grid provides a special class name "e-grid-dialog-fixed". By adding this class name to any parent element of the Grid component, the popup will be appended inside that parent element instead of being appended to the body.

You can ensure that the Grid inside the Accordion has a parent element with the "e-grid-dialog-fixed" class. This ensures that the popup is appended inside the Accordion itself, which resolves the popup position misalignment you are facing. Please find the code snippet and sample below for your reference:

[index.js]

 

/* ---------------- Grid inside INNER accordion ---------------- */

const ActionGrid = () => (

  <div className="e-grid-dialog-fixed">

    <GridComponent

      dataSource={gridData}

      allowFiltering={true}

      filterSettings={filterSettings}

      height={120}

      showColumnMenu={true}

      columnMenuItems={['Filter']}

    >

       .  .  .  .  .

    </GridComponent>

  </div>

);

 

/* ---------------- INNER Accordion ---------------- */

const InnerAccordion = () => (

  <AccordionComponent expandMode="Single">

    <AccordionItemsDirective>

      <AccordionItemDirective

        header="Raise Alert as Incident"

        content={ActionGrid}

      />

    </AccordionItemsDirective>

  </AccordionComponent>

);

 

Sample: https://stackblitz.com/edit/react-grid-qn3hcx-smukqur1

Please let us know if you need any further assistance.

Regards,

Santhosh I

[Michael Xiourouppa]

Hello,

Sorry for the late reply it was not working and i had to deliver a different jira so i left it behind but i have found the culprit which was tailwind css. We had it imported in a generic spectrum instead of being more specific and it turns out that it has some css manipulating the toolbar as such i made it more specific to accordions as needed and it fixed my issue.

This is the improt it was before.

@import '@syncfusion/ej2-navigations/styles/tailwind.css';

here is the import i have changed it to 

@import '@syncfusion/ej2-navigations/styles/accordion/tailwind.css';

[Michael Xiourouppa]

Hello,

Sorry for the late reply it was not working and i had to deliver a different jira so i left it behind but i have found the culprit which was tailwind css. We had it imported in a generic spectrum instead of being more specific and it turns out that it has some css manipulating the toolbar as such i made it more specific to accordions as needed and it fixed my issue.

This is the improt it was before.

@import '@syncfusion/ej2-navigations/styles/tailwind.css';

here is the import i have changed it to 

@import '@syncfusion/ej2-navigations/styles/accordion/tailwind.css';

[Santhosh Iruthayaraj]

Hi Michael Xiourouppa,

We are glad to hear that the issue has been resolved. Please feel free to reach out if you need any further assistance.

Regards,

Santhosh I