+ Start a Discussion
Rick MacGuiganRick MacGuigan 

@Page AND CSS AND VisualForce

Recently my CSS to format a VisualForce Page renders as PDF is not showing in landscape nor are page numbers showing. Both the preview from SalesForce and download show the PDF in portrait with no page numbers. The CSS has not changed and is at the bottom of the CSS file. CSS is used as a static resource.

Even if I wrap this CSS as a STYLE on the VisualForce page it still shows as portrait with no page numbers. 

Anyone know of recent changes that would impact this?
 
@page {
/* Landscape orientation */
size: ledger landscape;

/* Put page numbers in the top right corner of each
   page in the pdf document. */
@bottom-right {
 content: "Page " counter(page) "of " counter(pages);
}
   margin-top:3cm;
   margin-left:2.54cm;
   margin-right:2.54cm;
   margin-bottom:3cm;

   margin-top:1cm;
   margin-left:1cm;
   margin-right:1cm;
   margin-bottom:1cm;

}

The complete CSS: 
 

tr:hover {background-color: #f5f5f5}

.inputFieldStyle1 {
  color:blue;
  width: 360px;
  }

.rich-tabhdr-side-cell {border-top:none;}   
.rich-tabhdr-side-border {background-image:none;}

.tabPanel {
   border: none !important;
   }

.activeTab {
    background-color: lightblue;    
    background-image:none; 
    font-size: 18px;
    border-radius: 50px 20px;
    border: none !important; 
    }
.inactiveTab {
    background-color: lightgrey;    
    background-image:none;
    font-size: 12px;
    color:blue; 
    border-radius: 50px 20px;
    border: none !important;
}
    

.panelCol1 {width:20%; text-align:left;font-size:75%;}
.panelCol2 {width:50%; text-align:left;font-size:75%;color:blue}
.panelCol3 {width:30%; text-align:left;font-size:75%;color:blue}

    


.allPDFpanelGrid {
    text-align: left;
    font-family: 'Arial'; 
    font-size: 100%;   
    vertical-align: top;
    border-collapse: collapse; 
    border: 0px solid black;
    padding: 1px 1px 1px 1px;    
    -fs-table-paginate: paginate;
    border-spacing: 0;
    cellspacing 0;	
}

.allPDFpanelGridrows {
    /*text-align: right;*/
    font-family: 'Arial'; 
    font-size: 100%;   
    vertical-align: top;
    border-collapse: collapse; 
    border: 0px solid black;
    padding: 1px 1px 1px 1px;   
    cellspacing 0;
}

.allPDFpanelGridValue {
    /*text-align: left;*/
    font-family: 'Arial'; 
    /*font-size: 100%;*/   
    vertical-align: top;
    border-collapse: collapse; 
    border: 0px solid black;
    padding: 1px 1px 1px 1px;    
    -fs-table-paginate: paginate;
    border-spacing: 0;
    cellspacing 0;	
}

.allPDFdatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 1px 1px 1px 1px;
    color: blue;
    -fs-table-paginate: paginate;
    border-spacing: 0;
    cellspacing 0;	
}

.allPDFdatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 1px 1px 1px 1px;
    color: black;    
    cellspacing 0;
}

.allPDFdatacols {
    border-collapse: collapse; 
    border: 1px solid black;
	cellspacing 0;
    }

.alldatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    border-bottom: 1px solid #ddd;
	cellspacing 0;	
}

.alldatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black;    
    border-bottom: 1px solid #ddd;

}

.alldatacols {
    border-collapse: collapse; 
    border: 1px solid black;
    }



.odd {
 border-bottom: 1px solid #000;
 padding: 1px 1px 2px 2px;
 background-color: #ccf2ff;
}

.even {
 border-bottom: 1px solid #000;
 padding: 1px 1px 2px 2px;
 background-color: white;
}

.col{
height: auto;
float: left;
text-align: left;

.col1{
width:40%;
height: auto;
float: left;
text-align: left;
color:black;

.col2{
width:auto;
height: auto;
float: left;
text-align: left;
color:green;

.col3{
width:200px;
height: auto;
float: left;
text-align: left;
color:purple;
}


.button {
   background: blue;
   border-radius: 15px;
   color: white;
   font-size: 12px;
   vertical-align: middle;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
   }
.button:hover {
   border-top-color: black;
   background: yellow;
   color: blue;
    background-color: #4CAF50; /* Green */
    color: white;
   }
.button:active {
   border-top-color: yellow;
   background: yellow;
   }


.headerstyle1 .bPageBlock .pbHeader .pbSubheader {
    background-color: green !important;   
}
.headerstyle2 body .bPageBlock .pbBody .headerstyle2 .pbSubheader{
    background-color:yellow;
}



@page {
/* Landscape orientation */
size: ledger landscape;

/* Put page numbers in the top right corner of each
   page in the pdf document. */
@bottom-right {
 content: "Page " counter(page) "of " counter(pages);
}
   margin-top:3cm;
   margin-left:2.54cm;
   margin-right:2.54cm;
   margin-bottom:3cm;

   margin-top:1cm;
   margin-left:1cm;
   margin-right:1cm;
   margin-bottom:1cm;
 
}

 
Best Answer chosen by Rick MacGuigan
Rick MacGuiganRick MacGuigan
I resolved this. This was caused by an upstream CSS button that did not have a closing } . 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Rick,

Please find the below link from the stack exchange community with suggested solution for a similar issue. Please mark this thread as solved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra.
 
Rick MacGuiganRick MacGuigan
I resolved this. This was caused by an upstream CSS button that did not have a closing } . 
This was selected as the best answer