0

I am trying to put some styling to my table with a border-radius in my visualforce page but when rendered to pdf I dont see the rounded corners. Is this not possible with render to PDF and if not are there any suggestions to get rounded forms in render to pdf?

I tried:

<table style="border: 1px solid black; border-radius:50px">

and

<apex:page standardController="Quote" renderAs="advanced_pdf" cache="false" applyHtmlTag="false" applyBodyTag="false" standardStylesheets="false" showHeader="false" sidebar="false">

    <html>
        <head> 
        <style type="text/css" media="print">
                .rcorners1 {
                                    border-radius: 50px;
                                    border: 2px solid #000;
                                    padding: 20px; 
                                    width: 200px;
                                    height: 150px;    
                                    }
                </style>
        </head>    
    <body>        
            <p class="rcorners1">..</p>
    </body>  
    <html>
</apex:page>

If anyone wants to try this for a solution:

<apex:page standardController="Quote" renderAs="advanced_pdf" cache="false" applyHtmlTag="false" applyBodyTag="false" standardStylesheets="false" showHeader="false" sidebar="false">
    <html>
        <head>
            <style>
                .rcorners1 {
                border-radius: 50px;
                border: 2px solid #000;
                padding: 20px; 
                width: 200px;
                height: 150px;    
                }
                @media print {
                border-radius: 50px;
                border: 2px solid #000;
                padding: 20px; 
                width: 200px;
                height: 150px;   
                }
            </style>
        </head>
        <body>
            <table style="border: 1px solid black; border-radius:50px">
                <tr>
                    <td>
                        test
                    </td>
                </tr>
            </table>
            <p class="rcorners1">Lets look if this works</p>
        </body>
    </html>    
</apex:page>
  • Have you tried to put your style tag inside your <head></head> tag ? :) – FabienHuot Oct 24 '17 at 11:22
  • @FabienHuot I currenty have them between head tags but its not working I updated the info with what i have – Latifa Oct 24 '17 at 11:24
  • @Latifa I updated my answer, please check if it is related to css3 – Basti Oct 24 '17 at 11:29
  • Are your other css styles affecting the pdf? – Basti Oct 24 '17 at 12:16
1

Try putting your style tag within the head tag.

0

Maybe is because your new window can't understand your CSS style (media=print) can you try add something like this :

<style>
@media print {
 border-radius: 50px;
 border: 2px solid #000;
 padding: 20px; 
 width: 200px;
 height: 150px;   
}
</style>
  • I tried all of the above but its still not working if I remove the render as ik get rounded corners only for the <p class="rcorners1">..</p> part. Seems like I will have to be working with an image as background – Latifa Oct 24 '17 at 11:53
-1

Have you done these things:

If you use inline CSS styles, set the API version to 28.0 or later. Also set <apex:page applyBodyTag="false">, and add static, valid <head> and <body> tags to your page, as in the previous example.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_considerations.htm

Are your other css styles affecting the pdf?

Since border-radius is css3, please check if this change from summer 17 works for you:

renderAs="advanced_pdf"
  • Yes I did. I also updated my input to show what I already tried in case anyone else wants to do further research – Latifa Oct 24 '17 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.