Skip to main content
Hello Everyone,

I am trying to create 2 boxes that I can place Apex:Outputfield's inside to have Salesforce populate the To's and From's for my document.

How to create boxes in Salesforce using Visualforce

I need the page to RenderAs="PDF" so i am limited to the older css styling rather than the new SLDS styling

below is my code so far:

<apex:page standardController="Account" renderAs="pdf" >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<style type="text/css">

body {

font-family: sans-serif;

font-size:12px;

}

</style>

</head>

<body>

<table cellpadding="6" width="100%">

<tr>

<td>

<apex:outputPanel >

<apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>

</apex:outputPanel>

</td>

<td>

<apex:outputPanel >

Case Information

</apex:outputPanel>

</td>

<td>

<apex:outputPanel >

Form 2067

</apex:outputPanel>

</td>

</tr>

</table>

<table cellpadding="6" width="70%">

<tr>

<td>

<apex:outputPanel >

To:

</apex:outputPanel>

</td>

<td>

<apex:outputPanel >

From:

</apex:outputPanel>

</td>

</tr>

</table>

</body>

</html>

</apex:page>

Any Ideas?
5 answers
  1. May 10, 2018, 8:24 PM
    Hi,

     

    div.mybox {

    width: 320px;

    height:100px;

    padding: 10px;

    background-color: lightblue;

    border: 2px solid gray;

    margin: 0;

    }

    <table cellpadding="6" width="70%">

    <tr>

    <td style="vertical-align: text-top;">

    To:

    </td><td>

    <div class="mybox">

    My bla bla 1<br/>

    Ligne 2<br/>

    ligne 3<br/>

    </div>

    </td>

    <td style="vertical-align: text-top;">

    From:

    </td><td>

    <div class="mybox">My bla bla 2<br/>

    Ligne 2<br/>

    ligne 3<br/>

    </div>

    </td>

    </tr>

    </table>

     
0/9000