0

i have an issue, my visualforce css not working. when i use renderAs="PDF". somehow my border css does not working but another css working properly. i already try all answer on this forum but still not working.

here's my code:

<apex:page standardcontroller="Letter_Of_Offer__c" extensions="LOOController" sidebar="false" showHeader="false" renderas="PDF" contentType="application/pdf">
<html>
    <head>
        <style type="text/css" media="print">
            @page 
            {
               size: 8.5in 11in;
            }

            @page{
                @top-left{
                    content:element(header);
                }
            }
            .pagenumber:before {
            content: counter(page);
            }

            .pagecount:before {
            content: counter(pages);
            }

            div.header{
                padding-bottom:10px;
                font-family:Arial;
                position: running(header);
            }
            div.left{
                padding-left:50px;
                font-family:Arial;
                font-size:14px;
                position: running(form);
            }
            div.right{
                padding-right:330px;
                font-family:Arial;
                font-size:14px;
                position: running(form);
            }
            tr.border_bottomtop td {
                border-bottom:2px solid black;
                border-top:2px solid black;
            }
            tr.border_leftright td {
                border-left:2px solid black;
                border-right:2px solid black;
            }
            tr.border_bottom td {
                border-bottom:2px solid black;
            }
            tr.border_all td {
                border:2px solid black;
            }
            tr.border_leftrighttop td{
                border-left:2px solid black;
                border-right:2px solid black;
                border-bottom:2px solid black;
            }
            td.border_bottom{
                border-bottom:2px solid black;
            }
            td.border_bottomright{
                border-bottom:2px solid black;
                border-right:2px solid black;
            }
            td.border_left{
                padding-left:5px;
                border-left:2px solid black;
            }
            td.border_leftbottom{
                padding-left:5px;
                border-left:2px solid black;
                border-bottom:2px solid black;
            }
            td.border_leftright{
                padding-left:5px;
                border-left:2px solid black;
                border-right:2px solid black;
            }
            td.border_leftrightbottom{
                padding-left:5px;
                border-left:2px solid black;
                border-right:2px solid black;
                border-bottom:2px solid black;
            }
            td.bcollapse{
                padding-left:10px;
                padding-top:1px;
                padding-bottom:1px;
                border: 1px solid black;
            }
            td.bcollapse_leftright{
                padding-left:10px;
                padding-top:1px;
                padding-bottom:1px;
                border-left: 1px solid black;
                border-right: 1px solid black;
            }
            td.bcollapse_leftrightbottom{
                padding-left:10px;
                padding-top:1px;
                padding-bottom:1px;
                border-left: 1px solid black;
                border-right: 1px solid black;
                border-bottom:1px solid black;
            }
        </style>
    </head>
    <body>
        <apex:form>
            <div class="header">
                <img src="{!$Resource.SA_LOO_Pancoran}" style="WIDTH:750px; HEIGHT: 130px" title="logo"/>
                <br/><br/>
            </div>
            <div class="content">
                <div class="left" align="left"> <!-- div for deposit payment information-->
                    <br/>
                    <apex:outputText value="To accept this offer, please fulfil the following payments: "/><br/><br/>
                    <apex:outputText value="DEPOSIT PAYMENT:"/><br/>
                </div>
                <div class="left" style="padding-left:120px" align="left"> <!--div for table 2-->
                    <table width="530px" style="border-collapse:collapse">
                        <tr><td></td></tr>
                        <tr><td></td></tr>
                        <tr>
                            <td width="40%" class="bcollapse" style="font-weight:bold">Note</td>
                            <td width="30%" class="bcollapse" style="font-weight:bold">Amount</td>
                            <td width="30%" class="bcollapse" style="font-weight:bold">Due Date</td>
                        </tr>
                        <tr>
                            <td class="bcollapse" style="font-weight:bold"> {!depositPayment.Name}</td>
                            <td class="bcollapse" style="font-weight:bold"> {!depositPayment.Payment_Amount_Formula__c}</td>
                            <td class="bcollapse" style="font-weight:bold"> 14 Days After Receipt of LOO</td>
                        </tr>
                    </table>
                </div> 
            </div>
        </apex:form>
    </body>
</html>

2 Answers 2

0

Try some of the suggestions from Not able to get the css working for table

For example, try adding the applyHtmlTag="false" attribute to your apex:page element.

3
  • Hi @Rob, like my question title said my border working well without "renderas=PDF" tag in apex:page but it didnt work when i put that tag on my visualforce, i already input my class to <td> so it should came out.. Commented Oct 6, 2015 at 9:26
  • Please see updated answer
    – Rob
    Commented Oct 6, 2015 at 9:33
  • Hi @Rob, Still not working bro. Commented Oct 6, 2015 at 9:40
0

I already solve this problem, so we can not use css border because it not working in renderAs=pdf CMIIW

so the solution is , i use border="1" cellspacing="0" in every table you want to bordering it.

<div class="left" align="left"> <!--div for table 1-->
                    <table width="650px" border="1" cellspacing="0" style="font-weight:bold">
                        <tr>
                            <td class="bcollapse"></td>
                            <td class="bcollapse"> Amount</td>
                            <td class="bcollapse"> Rate</td>
                            <td class="bcollapse"> Total</td>
                        </tr>
                        <tr>
                            <td class="bcollapse"> Tuition Fee</td>
                            <td class="bcollapse"> {!opp.Tuition_Fee_Formula__c}</td>
                            <td class="bcollapse"> {!opp.Tuition_Fee_Discount_Formula__c}</td>
                            <td class="bcollapse"> {!opp.Tuition_Fee_After_Disc_Formula__c}</td>
                        </tr>
                        <tr>
                            <td class="bcollapse"> Development Fee</td>
                            <td class="bcollapse"> {!opp.Development_Fee_Formula__c}</td>
                            <td class="bcollapse"> {!opp.Development_Fee_Discount_Formula__c}</td>
                            <td class="bcollapse"> {!opp.Development_Fee_After_Disc_Formula__c}</td>
                        </tr>
                        <tr>
                            <td class="bcollapse"> Total Fee</td>
                            <td class="bcollapse"> {!opp.Total_Fee_Formula__c}</td>
                            <td class="bcollapse"></td>
                            <td class="bcollapse"> {!opp.Total_Fee_After_Disc_Formula__c}</td>
                        </tr>
                        <br/>
                    </table>
                </div>

it works on me !

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .