function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Michael DsozaMichael Dsoza 

Not getting background color in PDF....

Hi...I have made one visualforce page & in that i have made one table.

I am giving different-different color to their each row by javascript & it is working fine in salesforce environment but when i render the same page as PDF then I am not getting any background color on that row ?

I need background color in PDF too.

Please tell me how can i get background color in PDF too.

THnaking you...

Best Answer chosen by Admin (Salesforce Developers) 
MrTheTylerMrTheTyler

I found the answer in another thread

 

the "problem" was that I was using styles in the header

 

<!--This worked fine in HTML view but in PDF view the styles were not being taken into account-->
<style>
  .example{
    color: boogerGreen
  }
</style>

 

 

.  As prescribred by grigri9 in the post linked to above, moving the styles to a static resource and referencing it like below did the trick.  What a waste of 2 hours!

 

<apex:stylesheet value="{!URLFOR($Resource.mystylesheet)}"/>

 

Hope it helps somebody,

 

~Tyler

 

All Answers

Rahul SharmaRahul Sharma

As far as i know, Javascript doesn't work when the VF page is rendered as pdf.

so use CSS to achieve your goal.
Michael DsozaMichael Dsoza

Since my table is dynamic so how can i directly attach css to my table.

I tried the following things too like...

I have called css class in javascript code as

rows[i].className = "name of my class";

 

but it is still working in vfpage but not in pdf.

Please give me idea abt it...

 

THanking you..
Rahul SharmaRahul Sharma

have you tried giving style to tables?
for individual use like this:

<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">


and for whole page use like:

 

<style type="text/css">
h1{background-color:#6495ed;}
p{background-color:#e0ffff;}
div{background-color:#b0c4de;}
</style>

 
Michael DsozaMichael Dsoza

Yaa Rahul, you are right from yourside but there are some more table are there which is used only for the border in my page so if I give css like as u told so that row will also get filled by background color.

 

Since I am geenrating dynamic table & have to different-different color in their row like

If rownumber is even then red

else

 color is green

& every header must be of blue color.
Rahul SharmaRahul Sharma

Could you post small part of your code, where you are changing the colour.

It would be useful for us to help.
Michael DsozaMichael Dsoza
<style type="text/css">
	.DataTableEven{
		background-color:rgb(230,238,213);
	}
	.DataTableOdd{
		background-color:rgb(255,255,255);
	}
	.DataTableHeader{
		background-color:rgb(167,207,79);
	}
</style>
<script>
        function altRows(id)
        {
            if(document.getElementsByTagName)
            {  
                var table = document.getElementById(id);  
                var rows = table.getElementsByTagName("tr"); 
                for(i = 0; i < rows.length; i++)
                {  
					if(i == 0)
					{
						rows[i].className = "DataTableHeader";					
					}                    
					else if(i % 2 == 0)
                    {						
                        rows[i].className = "DataTableEven";
                    }
                    else
                    {
                        rows[i].className = "DataTableOdd";
                    }      
                }
            }
        }
        window.onload =   altRows('planTable');
    </script>

 This is code that i made to give alternate color to my table.

Since It is working fine in Visualforce page but it is not working while rendering PDF.
MrTheTylerMrTheTyler

I am having the same issue - have you discovered a solution?

 

Thank You!

 

Tyler
MrTheTylerMrTheTyler

I found the answer in another thread

 

the "problem" was that I was using styles in the header

 

<!--This worked fine in HTML view but in PDF view the styles were not being taken into account-->
<style>
  .example{
    color: boogerGreen
  }
</style>

 

 

.  As prescribred by grigri9 in the post linked to above, moving the styles to a static resource and referencing it like below did the trick.  What a waste of 2 hours!

 

<apex:stylesheet value="{!URLFOR($Resource.mystylesheet)}"/>

 

Hope it helps somebody,

 

~Tyler

 

This was selected as the best answer