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
Alex Waddell 17Alex Waddell 17 

How to create boxes in Salesforce using Visualforce

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.

User-added image
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?
Best Answer chosen by Alex Waddell 17
Alain CabonAlain Cabon
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>

 

All Answers

Alain CabonAlain Cabon
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>

 
This was selected as the best answer
Alex Waddell 17Alex Waddell 17
Thank you Alain,

I just had 1 more question. Where do I put this section in my code? 
div.mybox {
    width: 320px;
	height:100px;
    padding: 10px;
	background-color: lightblue;
    border: 2px solid gray;
    margin: 0; 
}

I placed it right into my Visual force page and it displayed as text. As shown below.

User-added image

Do I need to make a class and then call on that class?
 
Alain CabonAlain Cabon
Alex,

It is a CSS style like body but I am not sure that your problem will be solved for a VFP + PDF but the display is correct in pure HTML 
<style type="text/css">
                body {
                font-family: sans-serif;
                font-size:12px;
                }
div.mybox { 
width: 320px; 
height:100px; 
padding: 10px; 
background-color: 
lightblue; 
border: 2px solid gray; 
margin: 0; }
            </style>

It is a first idea that works in simple HTML.
Alex Waddell 17Alex Waddell 17
So you're saying that, If I rendered as pure HTML the boxes would function properly. But since we are rendering as PDF we cannot use this CSS styling to create a box?
ShamAhtiShamAhti

Hey Alex, 

 

You should put this piece of code into style as you have done previously in your first post. This is used for the style of your VF page body elements.

I hope this will help you.

 

Thanks.