Orientation: Landscape, Rendering behaviour

[ritscAlex]

I want to achieve this kind of effect:

However, when generating the output, the right side of the site gets pushed within the correct format, I guess:

I don't think, that this might be a bug. But might it be possible to render objects that reach above the correct format on all sides of the pdf?

[PejmanNik]

hmm, could you please try to implement that layout with PageOverlay ?

[ritscAlex]

That would work. But also means that only the layout is used for the whole report. Would be nice to be able to have different PageOverlays for different pages.

[PejmanNik]

yes, but the overlay will apply to the section's page, you could have multiple sections to limit the PageOverlay.

I'll create a feature request for a page-specific PageOverlay component

[ritscAlex]

<Section
    margin={pageMargin.None}
    dimension={pageSize.A4}
    orientation={"landscape"}
>

The pageMargin.None forces puppeteer to generator a blank page at the end of the pdf. Setting the margin to pageMargin.Narrow, only the pages with some content get generated.

The problem might be the margin-bottom of the jikji page and/or jikji section

[ritscAlex]

Ignore my comment above. If the variable 'orientation' within the

Component is set to 'landscape', a new blank page gets rendered each time, no matter of other components like , etc.

[PejmanNik]

I think it is related to page size, could you use a custom page size? something like

<Section
    margin={pageMargin.None}
    dimension={{height: '296.7mm', width: '209.7mm'}}
    orientation={"landscape"}
>

[ritscAlex]

Setting the page size to custom values, doesn't affect anything. However, if the orientation gets set to "portrait" no blank page gets rendered. Also, when using "landscape" as section orientation, the always gets render on a new page expect a margin-bottom of 20px is set.

[PejmanNik]

can you decrease the height and width by 1 mm in each try and test? I believe the issue is happening with different page sizes in chromium with standard page sizes.

[ritscAlex]

I tried to reduce the dimension by 0.1mm from height: '296.8mm', width: '210mm' to height: '296.0mm', width: '209.0mm' with no effect. Then I tried to reduce the dimension by 1mm from '296.8mm', width: '210mm' to '285.8mm', width: '200.0mm' with no effect.

[PejmanNik]

ok, thank you. so it should be a bug in the lib layout system, I'll take a look

[PejmanNik]

Could you please test with version 4.0.1?

[sharathm89]

@PejmanNik your recent commit or ver 0.4.1 has caused few issues.

On website it looks good but when pdf is generated it creates space in bottom and affects the footer as well...

Below 2 images in bottom looks good in website.

Below 2 images in bottom from PDF file.

PDF File with issues
out.pdf

Below is the github repo link which can be used for testing purpose.
Repo Link

or

Sample code setup is done in codesandbox...
https://codesandbox.io/s/report-web-app-mm4l5l?file=/src/App.js

[ritscAlex]

@sharathm89 he tried to reduce the width & height by -2px:

width: `calc(${dimension.width} - 2px )`,
height: `calc(${dimension.height} - 2px )`,
maxHeight: `calc(${dimension.height} - 2px )`,

In order to fix your table, you could translate your footer component by 2px
transform: translateY(2px);

[ritscAlex]

@PejmanNik The bug was fixed with version 0.4.1.

[PejmanNik]

@sharathm89 it seems i overcorrected the page dimensions, will try to find something in the middle

[sharathm89]

@sharathm89 it seems i overcorrected the page dimensions, will try to find something in the middle

Sure will be waiting...

[sharathm89]

Any update on the issue @PejmanNik

[PejmanNik]

I'm working on it but why do you need to use the version? Just downgrade to the previous version

[sharathm89]

ok just taught of keeping the latest version... But yes will downgrade for now