jsReport Display Issue: Header Overlapping with Body

[Genhan]

Hello,

I deployed a jsReport to our production environment and noticed that the header section is overlapping with the report body. However, when I tested this report in our test environment, it displayed correctly. See the following screenshots:

In test environment:

On production:

Do you have any suggestions on how I can troubleshoot this issue? Both production and testing servers are on Windows 2019.

Thank you!

[admin]

What kind of header is that? Is it a header template merged using pdf utils?

[Genhan]

Yes, here is the config:

Thank you!

[admin]

Thanks. It looks like you just forgot to set the top margin for the main template. Could you check it?

[genhan2011]

This is our main template settings:

The jsReport version is 3.13.0. Does it seem right to you?

Thank you!

[genhan2011]

I just realized that my testing environment is using jsReport 3.1.1. After I downgraded the jsReport on production from 3.13.0 to 3.1.1, the overlapping issue disappeared.

This is the config on jsReport 3.1.1:

Can you suggest how to adjust the 3.13.0 pdf config to make the report work correctly?

Thank you!

[admin]

After I downgraded the jsReport on production from 3.13.0 to 3.1.1, the overlapping issue disappeared.

I am not aware of anything that could cause such change.

The jsReport version is 3.13.0. Does it seem right to you?

Your template doesn't set top margin. This means the content of the main template will start at the top and merged templates like headers will likely overlap. Try to set a top margin explicitly and check the result.

[genhan2011]

Setting up the top margin works on 3.13. However, the main template's CSS with .body {margin-top: 150px} introduces a large gap at the top of the first page.

I believe that in version 3.11 and earlier, this CSS was applied to each page individually, whereas in 3.13, the .body style is considered for the entire report, not just each page.

This means I'll have to adjust all my existing reports :-(

[admin]

I've tried 3.13, 3.11.0, 3.1.1 and in all cases, it makes a margin just for the first page which is expected.

Btw the page margin has this css

@page {
      margin-top: 5cm;      
 }

Your problems could be caused by a different version of chrome which may apply some specific things differently. Unfortunately, there is nothing we can do about it. jsreport just uses the latest chrome as it is without tweaking it.