+ Start a Discussion
JimmyMacJimmyMac 

PDF to open in landscape..

I have read a lot of things on the net saying this can be done but I have tried all the suggestions and can't get it to work. My page always ends up in portrait. Below is the stylesheet I am using. In addition to what I have here, I have also tried:

 

@page{size: a4 landscape}

@page(size: landscape}

 

 

<style>
th {white-space:nowrap;background-color:#000080;

 @page {
  size: 297mm 210mm;
}

odd {
background-color: #FCF7F7;
}
even {
background-color: #E3DCDB;
}

.showme
{
   position:static;
 
   display: none;
   overflow: auto;
   visibility:visible;
 
}
.showhim:hover .showme
{
display :block;
}
</style>

 

Has anyone else had this problem?.... I also gutted my page and just put one simple html table and tried to render this landscape, and again it came back portrait.

 

Thanks in advance for any help on this!

Best Answer chosen by Admin (Salesforce Developers) 
sfdcfoxsfdcfox

The answer is obtuse, but here's the solution: you have to include the style inside a head tag. Here's an empty pdf that renders as landscape:

 

<apex:page renderAs="pdf">
<head>
<style type="text/css">
@page { size: landscape; }
</style>
</head>
</apex:page>

Without the <head> tag (and closing tag), the renderer will ignore the media selector.

All Answers

sfdcfoxsfdcfox

The answer is obtuse, but here's the solution: you have to include the style inside a head tag. Here's an empty pdf that renders as landscape:

 

<apex:page renderAs="pdf">
<head>
<style type="text/css">
@page { size: landscape; }
</style>
</head>
</apex:page>

Without the <head> tag (and closing tag), the renderer will ignore the media selector.

This was selected as the best answer
JimmyMacJimmyMac

Thanks, but it still isn't working for me, below is the test I ran, it still renders the PDF as portrait. I am using Firefox for browsing btw....

 

<apex:page controller="ContactSearchController" sidebar="false" renderAs="pdf"  showHeader="false" id="pgid" >
<head>
<style type="text/css">
        .bold { font-weight:bold }
        .lt { text-align:left; }
        .ct { text-align:center;  }
        .rt {font-weight:bold; text-align:right; }
        .fl150 { float: left; width:150px;}
        .fl50 { float: left; width:50px;}
        .fl350 { float: left; width:350px;}
        .fatbl { float: left; width:500px;
         .tbl tr:hover
        {
            background-color:#e3f3ff;
        }
          @page { size: landscape; }  
</style>
</head>
</apex:page>

sfdcfoxsfdcfox

The browser is irrelevant, it's a pdf file. You'll have to experiment with the exact syntax. For the record, sfdc uses Flying Saucer (Java) for rendering, so you might have better luck asking someone on the FS forums.

Rich PRich P
If nothing else has worked for you, this may be an issue with the API version that the page is using. I found that the same styling worked in API v27 but not in API v29. You can easily edit the API version that your page uses by editing the page-meta.xml file that accompanies your VisualForce page. See my answer at the bottom of the following thread for more detail:

https://developer.salesforce.com/forums/?id=906F000000095UrIAI