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>

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.

  • 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.. – Febrian Tarigan Oct 6 '15 at 9:26
  • Please see updated answer – Rob Oct 6 '15 at 9:33
  • Hi @Rob, Still not working bro. – Febrian Tarigan Oct 6 '15 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 !

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.