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
acl5acl5 

Custom Component background not rendering in repeat and not rendering in pdf?

I have a requirement to print a few SObject fields onto a postcard that will be printed.  My plan was to create a custom component and get the CSS all set up then add the custom component to an <apex:repeat> tag on a VF page with a controller set-up to grab the two fields I need on the post card.  After some trial and error I was able to get my custom component set-up the way I want but when I add it to the repeat tag the background image is only rendered for the first item in my repeat list.  The SOBject data is rendered for the entire iteration, but the background image is missing.

Then when I render the page as PDF so it is printable, the page displays the CSS syntax instead of displaying the component?

I'm not sure what to do next.  If I use and <apex:image> tag in the repeat the image repeats without issue as well as renders as a pdf.

Any all suggestions are appreaciated.
bob_buzzardbob_buzzard
The Visualforce PDF renderer only supports CSS 2.1 AFAIK (as its based on Flying Saucer, which only supports that level).  If your CSS is using features from a later version then it won't work I'm afraid.
acl5acl5
Thanks for the response bob.  I didn't know that the PDF renderer uses CSS 2.1

I don't have a lot of exposure to CSS so to see if this was my issue I removed all the css from my component except for the background definition

body {
   
    background-image: url({!image});
    background-repeat:no-repeat;

    }

which I believe is supported in CSS 2.1.

My custom component is pretty simple:

<apex:component >
 <apex:attribute name="SerialNumber" description="The Serial Number"
                    type="String" required="true"/>
  <apex:attribute name="ActivationCode" description="The Activation Code"
                    type="String" required="true"/>
<apex:attribute name="image" description="The background image"
                    type="String" required="true"/>
  <style>
    
body {
    
    background-image: url({!image});
    background-repeat:no-repeat;

    }

  </style>

<body>

  <!--Serial Number-->
  
     <text id="input">{!SerialNumber}</text>
    <!--Device Number-->
    <text id="input2">{!ActivationCode}</text>

</body>

</apex:component>
And it renders ok as HTML, but when I use renderas="pdf"

I get this:

User-added image

So instead of setting the defined image as the background, the page renders the CSS definition.  Not sure what to do next.