UI Elements Overlapping in extent report

[SanyaNegi]

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.

[sudheshg]

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

If possible, attach the report sample with mocked values.

[SanyaNegi]

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

[sudheshg]

@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.