I have the following code in my project.
<AgGridReact
columnDefs={columnDefs}
rowData={sortedData}
domLayout="autoHeight"
pagination={false}
className={"ag-theme-astro"}
/>
When I display it on our page, the AG Grid is twice as high as it needs to be.
It's worse when I am using RuxAccordion from AstroUX where it's not only over-height, but also extends off of the side of the screen.
<RuxAccordion>
{sortedData.map((item) => (
<RuxAccordionItem key={item.NAME} style={{width:"100%"}}>
<div slot="label">{item.NAME}</div>
<div style={{ width: "100%", height: "auto" }}>
</div>
</RuxAccordionItem>
))}
</RuxAccordion>
I've looked through the resulting code, as well as my CSS, and I don't see anything indicating a minimum height, with the documentation suggesting the minimum ought to be 150 pixels unless overridden.
Similar code does not seem to have this issue with the bare AG Grid on Code Sandbox, which makes me think that I might be encountering something involving the rest of the application setup (I'm working on a project for work), but I don't know what to look for.