Validation errors are showing inside the table and adding a scrollbar

[Hajir]

Hi, 
When there is only one record in the table and there is a validation error, the validation message shows inside the table and adds a scrollbar to the table. I don't want to set a height to the table as I want it to adjust the height dynamically but couldn't manage to fix this issue. I tried with both Bootstrap and Material templates and couldn't manage to fix it.

I'd appreciate your help.

Thanks you for your great support and product!

[Renjith Singh Rajendran]

Hi Hajir, 

Greetings from Syncfusion support. 

We have analyzed the scenario, and we would like to inform you that, this is the default behavior. As there is no space to contain the rendered validation tooltip messages inside the Grid content area, scrollbar is rendered to display the validation messages.  

When Height for grid is not provided, grid’s content area will be based on available rows in grid. Now only single row space is available in Grid, and there is no space to show the rendered floating validation message tooltip inside Grid area. So, the scroller is rendered and it automatically scrolls down to display the validation tooltip message. 

We have prepared a video demo showing, the scrollbar automatically scrolls to display the validation tooltip. And once valid values are shown, the scroller disappears.  

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/singlerowadd1435436137 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Hajir]

Hi, Thank you for your reply.

Yes I understand this behaviour and I tried to play around with the CSS to make it look on top the table but I was not successful.

I wonder if this can be added as an option for the grid in the future to make it more user-friendlier?

Thanks for your great support.

Best 

[Renjith Singh Rajendran]

Hi Hajir, 

As informed in our previous update, this is the default behavior in Grid. So, based on your scenario of displaying the validation messages at top, as a workaround we suggest you to check this by applying styles for Grid’s content element.  

 

<style> 

    .e-grid.sf-grid .e-gridcontent .e-content{ 

        overflow-y: visible; 

        overflow-x: visible; 

        position:unset; 

    } 

</style> 

Applying above style will display the validation messages at the top as like the below screenshot. 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith R