Landscape Webpage

  

How do i let my Web Page like a landscape style, with the width bigger and etc...

Hi Vinicius,

What do you meant by "landscape"?

I mean, I know what it is, but in general, there is no good reason to think a web page as something "landscape" for many reasons.

One is that for the user, in general, it is much easier to scroll down and up than to the sides.

Second, it is much easier to think "responsive" if you assume that the viewport width is your lateral boundaries, as the "100%" works always in the horizontal, but it is not obvious (or easy) to define a 100% height.

There are other reasons.

So, what exactly what are you trying to accomplish? Why do you think you need a "landscape" page?

What's your use case?

Cheers

Eduardo Jauch

Eduardo Jauch wrote:

Hi Vinicius,

What do you meant by "landscape"?

I mean, I know what it is, but in general, there is no good reason to think a web page as something "landscape" for many reasons.

One is that for the user, in general, it is much easier to scroll down and up than to the sides.

Second, it is much easier to think "responsive" if you assume that the viewport width is your lateral boundaries, as the "100%" works always in the horizontal, but it is not obvious (or easy) to define a 100% height.

There are other reasons.

So, what exactly what are you trying to accomplish? Why do you think you need a "landscape" page?

What's your use case?

Cheers

Eduardo Jauch

haha ok, well eduardo i want this to perform my pdf page... i am using the html to pdf that i think its the best alternative to export to pdf right? and i trying to let the page better...


Solution

Hello Vinicius,

Well, so, this is a totally different case :)

Here you have all the options you can pass to HTMLToPDF when calling it. You can pass those options through the input parameter OtherArgs.

To change the page orientation (Landscape/Portrait) you can pass the following argument:

    -O Landscape 

or 

    --orientation Landscape

The valid options are Landscape and Portrait (default).

Regarding styling your page to convert to PDF, I would say that this shouldn't be a problem, as long as you style it to have, in the outer part of it, 100% width. Or, you can define your outer most element (div) to have defined dimensions (with and height) defined in centimeters (for example), to take into account the page size you want to print to.

But I think 100% width is better, as it will allow you more flexibility in the generation of the PDF.

To define paper size, you can use the following options:

    -S A4 

or 

    --page-size A4

Valid values are A4 (default), Letter, etc.

You can also set the Height of the page with the following option:

    --page-height 240mm

Units here are millimeters.

Here you have a nice example on putting header and footer using this component.

Regarding other components to convert a page into HTML, you have these options:

https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1043 (for platform version 8, from 2015)
https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1165 (for platform version 9, from 2016)
https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1067 (for platform version 9, from 2015)

But I never used them.

Hope this helps.

Cheers,
Eduardo Jauch

Solution

Eduardo Jauch wrote:

Hello Vinicius,

Well, so, this is a totally different case :)

Here you have all the options you can pass to HTMLToPDF when calling it. You can pass those options through the input parameter OtherArgs.

To change the page orientation (Landscape/Portrait) you can pass the following argument:

    -O Landscape 

or 

    --orientation Landscape

The valid options are Landscape and Portrait (default).

Regarding styling your page to convert to PDF, I would say that this shouldn't be a problem, as long as you style it to have, in the outer part of it, 100% width. Or, you can define your outer most element (div) to have defined dimensions (with and height) defined in centimeters (for example), to take into account the page size you want to print to.

But I think 100% width is better, as it will allow you more flexibility in the generation of the PDF.

To define paper size, you can use the following options:

    -S A4 

or 

    --page-size A4

Valid values are A4 (default), Letter, etc.

You can also set the Height of the page with the following option:

    --page-height 240mm

Units here are millimeters.

Here you have a nice example on putting header and footer using this component.

Regarding other components to convert a page into HTML, you have these options:

https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1043 (for platform version 8, from 2015)
https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1165 (for platform version 9, from 2016)
https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1067 (for platform version 9, from 2015)

But I never used them.

Hope this helps.

Cheers,
Eduardo Jauch

Ok and where i should put this arguments?


Eduardo Jauch wrote:

Hello Vinicius,

Well, so, this is a totally different case :)

Here you have all the options you can pass to HTMLToPDF when calling it. You can pass those options through the input parameter OtherArgs.

To change the page orientation (Landscape/Portrait) you can pass the following argument:

    -O Landscape 

or 

    --orientation Landscape

The valid options are Landscape and Portrait (default).

Regarding styling your page to convert to PDF, I would say that this shouldn't be a problem, as long as you style it to have, in the outer part of it, 100% width. Or, you can define your outer most element (div) to have defined dimensions (with and height) defined in centimeters (for example), to take into account the page size you want to print to.

But I think 100% width is better, as it will allow you more flexibility in the generation of the PDF.

To define paper size, you can use the following options:

    -S A4 

or 

    --page-size A4

Valid values are A4 (default), Letter, etc.

You can also set the Height of the page with the following option:

    --page-height 240mm

Units here are millimeters.

Here you have a nice example on putting header and footer using this component.

Regarding other components to convert a page into HTML, you have these options:

https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1043 (for platform version 8, from 2015)
https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1165 (for platform version 9, from 2016)
https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=1067 (for platform version 9, from 2015)

But I never used them.

Hope this helps.

Cheers,
Eduardo Jauch

Another thing but i think that this arguments will solve its that my informations that goes on the pdf are looking very small on the pdf... and the style is big...


Hi, you put in the "Other Args" property of the action you use to create the PDF :)

Eduardo Jauch wrote:

Hi, you put in the "Other Args" property of the action you use to create the PDF :)

Hello Eduardo, the landscape worked!!!

I have one more problem on the pdf, my chart isnt appearing anymore... this was even before this landscape but i dont know why he is not appearing...


Vinicius Schonardie wrote:

Eduardo Jauch wrote:

Hi, you put in the "Other Args" property of the action you use to create the PDF :)

Hello Eduardo, the landscape worked!!!

I have one more problem on the pdf, my chart isnt appearing anymore... this was even before this landscape but i dont know why he is not appearing...


Nice! Go there mark my answer as the solution (as it is the solution for the initial question ;) rs)

Regarding the problem with the charting. 

I would say that first of all, you should check if the exactly same page, if open from the browser (instead of passing it as argument to the function), shows the graph in the page. If it shows in the page, I think it shouldn't disappear from the PDF.

But the better is to open a new question to deal specifically with this issue. Just test to see if it appears in the browser, first :)

Cheers,
Eduardo Jauch


Eduardo Jauch wrote:

Vinicius Schonardie wrote:

Eduardo Jauch wrote:

Hi, you put in the "Other Args" property of the action you use to create the PDF :)

Hello Eduardo, the landscape worked!!!

I have one more problem on the pdf, my chart isnt appearing anymore... this was even before this landscape but i dont know why he is not appearing...


Nice! Go there mark my answer as the solution (as it is the solution for the initial question ;) rs)

Regarding the problem with the charting. 

I would say that first of all, you should check if the exactly same page, if open from the browser (instead of passing it as argument to the function), shows the graph in the page. If it shows in the page, I think it shouldn't disappear from the PDF.

But the better is to open a new question to deal specifically with this issue. Just test to see if it appears in the browser, first :)

Cheers,
Eduardo Jauch


Hey Eduardo, im having a problem, im using the landscape but my container even if is fill parent 100% he is letting a margin on the top, and sides... There is another function or something?


Hi Vinicius,

First, it is necessary to see if the page has some CSS that is setting those margins (also, I think most browsers add a margin to the body automatically).

If that's the case, with CSS you should be able to solve this issue.

If not, than probably is the application that converts the page to PDF that is adding the margin, and will be possible to solve by the app options, but you will need to investigate in the link I sent previously, with the options.

Anyway,

Try adding this to your page CSS:

html, body { margin: 0; padding: 0; }

Cheers,

Eduardo Jauch

Eduardo Jauch wrote:

Anyway,

Try adding this to your page CSS:

html, body { margin: 0; padding: 0; }

Cheers,

Eduardo Jauch

Hello, it didnt worked... still has the white spaces on the left right top down


Hi Vinicius,

Try to add these options to the OtherArgs: 

-T 0 -B 0 -L 0 -R 0

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

Hi Vinicius,

Try to add these options to the OtherArgs: 

-T 0 -B 0 -L 0 -R 0

Cheers,
Eduardo Jauch

Worked!!! Thankk you!