Table columns overlaps with each other

1 Answer 215 Views
Report Viewer - Angular Report Viewer - HTML5 Styling Table
Jed
Top achievements
Rank 1
Jed asked on 01 Jan 2022, 01:21 AM

Good day!

 

I've been having this problem for a while now, in some parts of my report the columns overlap, no matter what I do on the styling I still can't fix it. Here's how it looks:

 

This is a table without borders on both the table and the textboxes.

While this one is a table with borders but no borders on the textboxes.

I'd also like to add that this issue is inconsistent. This mostly happens when opening the report on Google Chrome but it doesnt happen on Edge. Also there are zoom levels that the layout is fixed for example if I zoom about 150% the layout gets fixed.

 

Also I think what's strange is that only the colored columns overlaps. As you can see the columns with just white background are working well.

1 Answer, 1 is accepted

Sort by
0
Todor
Telerik team
answered on 05 Jan 2022, 12:32 PM

Hi Jed,

The issue may be related to the rounding that our code makes, for example, when the location/size/borders cannot be evaluated to whole pixels. That's why when you zoom in the issue may disappear.

In the table, the colored rows have their background explicitly set. I suspect that the white rows of your table don't have the color set explicitly, i.e. e the white color is by default. In this case, the Reporting engine in fact does not draw any background. This must be the reason for the difference.

If you would like to fix the issue, i.e. all the table rows to have uniform edges, you need to set an explicit color also to the rows with the default background color. For example, you may set it to white. This way, the engine will draw the background and it should encompass the same area as the currently colored rows.

It is very strange that the issue occurs in Chrome and not in Edge. The HTML that the Reporting engine generates is the same. As far as I know, Edge and Chrome are both using the Blink rendering engine, hence I would expect them to render the same HTML identically.

Regards,
Todor
Progress Telerik

Brand new Telerik Reporting course in Virtual Classroom - the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products. Check it out at https://learn.telerik.com/.
Tags
Report Viewer - Angular Report Viewer - HTML5 Styling Table
Asked by
Jed
Top achievements
Rank 1
Answers by
Todor
Telerik team
Share this question
or