Filter buttons get clipped

[Andrew Fraser]

I am using the DataGrid control but I find that if I apply a filter to a column that results in only one item, when I go to clear the filter with the Clear button, the buttons are clipped at the bottom of the grid:

How do I fix this?

Andy

[Prathap Senthil]

Hi Andy,

Based on the details you have shared, we suspect that the Grid may be rendered inside a Dialog with overflow: hidden or placed within a container that has overflow: hidden. Due to this layout restriction, the Grid’s filter dialog or menu buttons (Clear /Filter) may appear clipped at the bottom of the Grid, which could be the reason you are encountering this issue.

Before we proceed further with the investigation, we kindly request a few additional details from your side to help us troubleshoot effectively:

1. Please share the Grid code snippet along with the model class used.
2. Kindly confirm whether the Grid is placed inside an SfDialog or any other container/component with restricted overflow.
3. To analyze the issue accurately, could you please provide a simple and reproducible sample that demonstrates the problem? This will help us identify the root cause more efficiently and provide an appropriate solution.

The above requested details will be very helpful in validating the reported issue on our end and assisting us in providing a solution at the earliest. Thank you for your understanding and cooperation.

Regards,
Prathap Senthil

[Andrew Fraser]

Prathap,

You were correct, the grid was wrapped in a <div> which had a style that included overflow:hidden. I have now modified the style for the div and it works fine.

Many thanks for your help.

Andy

[Guhanathan Ramanathan]

Hi Andy,

 

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

 

Regards,

Guhanathan R

[Good For You]

This is a helpful explanation of a common layout issue with the Syncfusion DataGrid. The detail about checking the parent container’s overflow property is especially useful, as overflow: hidden can easily cause filter controls to be clipped when the Grid content changes dynamically. It’s also good to see that adjusting the container styling resolved the problem. Thanks for sharing the troubleshooting steps and solution, it should help others facing similar UI issues.

[Prathap Senthil]

Hi ,

Thank you for sharing your feedback.

We are glad to hear that the explanation was helpful and that the root cause was identified. As you mentioned, parent containers with overflow: hidden can restrict the display of Grid popups such as filtering menus, causing elements like the Filter and Clear buttons to appear clipped. Adjusting the container's overflow behaviour is the recommended approach in such scenarios. We appreciate you taking the time to share your thoughts. Please get back to us if any issue faced with this.

Regards,
Prathap Senthil

[Sabir]

This is a useful troubleshooting point for anyone working with the Syncfusion DataGrid. The clipping can actually come from the parent container rather than the Grid itself, especially when overflow: hidden is applied. Checking the surrounding <div> or dialog container and adjusting its overflow behavior can resolve the issue and allow the Filter and Clear buttons to display properly. Thanks for sharing the solution, it’s a helpful reminder to check the container CSS when Grid elements appear clipped.

[Prathap Senthil]

Hi Sabir,

Thank you for the update.

You are absolutely correct. In scenarios where DataGrid pop-up elements appear truncated or partially hidden, the issue may not always originate from the Syncfusion DataGrid itself. Parent containers, dialogs, or wrapper <div> elements configured with overflow: hidden can clip pop-up content, including the Filter and Clear buttons in the filter menu. Adjusting the container's overflow settings is an effective solution in such cases.

Regards,
Prathap Senthil