extentreports-csharp UI Elements Overlapping in extent report

Hi @anshooarora

I am using ExtentReport 5.0.4 with C# MSTest framework.

In all the reports generated, some UI elements overlap each other especially when test case description takes up more space as pointed out in the below screenshots.

Please look into it.

*Note: Recently migrated to .net8 framework and upgraded to ExtentReport V5.

Mar 06 '25 19:03 SanyaNegi

Hi @SanyaNegi provide the browser info and the screen resolution that you have assessed.

If possible, attach the report sample with mocked values.

Apr 01 '25 03:04 sudheshg

Hi @sudheshg

I have seen this issue in all the browsers that I use - Chrome, IE and Brave. Screen Resolution is 100%. On Changing resolutions, the issue persists but the position of the overlapping element changes.

I have attached 2 reports - One where Test case description is long and the elements overlap. The other one has short desccription, so overlapping does not occur.

GitHub Issue Sample ExtentReports.zip

Apr 16 '25 14:04 SanyaNegi

@anshooarora The default height for the info class affects the overlapping issue.

.test-wrapper .test-content .test-content-detail .detail-head .info { height: 50px; padding-left: 65px }

This issue occurs if the description is too long.

Apr 23 '25 11:04 sudheshg