1

Can any one help me out.I have a custom Visual force page created in a PDF format.It has Two section as "General information" and Justification Account Inormation. Both.Both the section data should get displayed in page side by side .

1)For General Information i have displayed the data at Left side of the page.

2)For Justification Account Information i need to get the data displayed at the Right side of the page.How can i achieve .Any Sugestion Plz

Visual force code :

<apex:page standardController="Quote" 
        applyHtmlTag="false" renderAs="PDF" showheader="false" applyBodyTag="false" extensions="QuoteContentController">

<head>
    <style>
        @page {
            margin: 1px 50px 225px 50px; 
            size:A4;
            Padding-top:30px;

            @top-center { 
                    content : element(header);
                 }

            @bottom-center {
                    content : element(footer);
                    height:200px;
                    padding-top:10px;
                 }
        } 
        body { font-family: 'Arial Unicode MS'; }
        .companyName { font: bold 30px; color: red; }  
        table {width:100%; border-spacing:0; border-collapse:collapse; border-width: 1px; border-color:#C0C0C0;border-style:solid;} 
        .header-table-data { border-width: 1px; border-color:Black;border-style:solid;background-color:#FFFFFF;
                             color:Black; font-size:14px; font-family:Verdana;
                             text-align:center;}
        .header-table-heading {border-width: 1px; border-color:Black;border-style:solid;background-color:#C0C0C0; 
                               font-weight:bold;color:Black; font-size:14px; font-family:Verdana;
                               text-align:center;}
        .header-data { border-width: 0px; border-color:Black;border-style:solid;background-color:#FFFFFF;
                       color:Black; font-size:12px; font-family:Verdana;text-align:left; padding-right: 10px;}

        .header-heading {border-width: 0px; border-color:Black;border-style:solid; 
                         font-weight:bold;color:Black; font-size:14px; font-family:Verdana;
                         text-align:left;}

    </style>

</head>    
<table cellspacing="0" cellpadding="0" width="100%" border="0" >
            <tr>

              <td bgcolor="Silver">General Information:</td>

                <td bgcolor="Silver">Justification and Account Information:</td>

             </tr>
                <tr>
                <td ><f style="color:Black; font-size:12px; font-family:Verdana;">QuoteNumber:</f></td>
                <td class="header-data"><apex:outputText value="{!Quote.QuoteNumber}"/></td>

                <tr>
                <td> <f style="color:Black; font-size:12px; font-family:Verdana;">CustomerName: </f></td>
                <td class="header-data"><apex:outputField value="{!Quote.Name}"/></td>

                </tr>
    <!--Justification Account Information-->
               <td ><f style="color:Black; font-size:12px; font-family:Verdana;">RFQ Justification:</f></td>
                <td class="header-data"><apex:outputField value="{!Quote.Account.Name}"/></td>
                </tr>
    <table>
</apex:page>
|improve this question
  • Why are you doing this with "table", "tr", and "td"? Why not use "apex:pageBlockTable" and "apex:column" or something similar? – Jagular Feb 3 '15 at 16:50
  • @Jagular:i have updated the code.Custom vf page should be in a PDF format. – nikkey Feb 3 '15 at 17:39
  • You have the renderAs="PDF" which will make the page a PDF, but I don't understand why you are using the basic HTML tags for formatting instead of the apex ones like "apex:pageBlockTable" and "apex:column". Here is a short example -> sfdcpoint.com/salesforce/visualforce-page-render-pdf – Jagular Feb 3 '15 at 18:09
  • @Jagular:I have custom and standard objects which are not related to each other .All the data should get displayed in a Page in a PDF format. – nikkey Feb 3 '15 at 18:31
  • 1
    @Jagular - Sometimes it is just easier to use standard HTML when doing things like this. Take a lot of the salesforce gotcha's out of the picture.....After all, VF tags all render as the html tags Nikkey is using anyways. Try adding a style class to a <apex:inputselect> salesforce removes it and you have to go through some creative work to add your own classes to it as document.ready does not work to add the class either. (Just an example I had to deal with yesterday). – Eric Feb 3 '15 at 19:47
1
I have made some changes in your code and tested in dev org. its working fine.

<apex:page standardController="Account" applyHtmlTag="false" renderAs="PDF" showheader="false" applyBodyTag="false">

<head>
    <style>
        @page {
            margin: 1px 50px 225px 50px; 
            size:A4;
            Padding-top:30px;

            @top-center { 
                    content : element(header);
                 }

            @bottom-center {
                    content : element(footer);
                    height:200px;
                    padding-top:10px;
                 }
        } 
        body { font-family: 'Arial Unicode MS'; }
        .companyName { font: bold 30px; color: red; }  
        table {width:100%; border-spacing:0; border-collapse:collapse; border-width: 1px; border-color:#C0C0C0;border-style:solid;} 
        .header-table-data { border-width: 1px; border-color:Black;border-style:solid;background-color:#FFFFFF;
                             color:Black; font-size:14px; font-family:Verdana;
                             text-align:center;}
        .header-table-heading {border-width: 1px; border-color:Black;border-style:solid;background-color:#C0C0C0; 
                               font-weight:bold;color:Black; font-size:14px; font-family:Verdana;
                               text-align:center;}
        .header-data { border-width: 0px; border-color:Black;border-style:solid;background-color:#FFFFFF;
                       color:Black; font-size:12px; font-family:Verdana;text-align:left; padding-right: 10px;}

        .header-heading {border-width: 0px; border-color:Black;border-style:solid; 
                         font-weight:bold;color:Black; font-size:14px; font-family:Verdana;
                         text-align:left;}

    </style>

</head>    
<table cellspacing="0" cellpadding="0" width="100%" border="0" >
            <tr>

              <th  bgcolor="Silver">General Information:</th>
              <th bgcolor="Silver"></th>

                <th bgcolor="Silver">Justification and Account Information:</th>
                <th bgcolor="Silver"></th>
                </tr>


                <tr>
                <td ><f style="color:Black; font-size:12px; font-family:Verdana;">QuoteNumber:</f></td>
                <td class="header-data"><apex:outputText value="{!Account.Name}"/></td>
                <!--Changes done here -->
                <td ><f style="color:Black; font-size:12px; font-family:Verdana;">RFQ Justification:</f></td>
                <td class="header-data"><apex:outputField value="{!Account.Name}"/></td>
                 </tr>

                <tr>
                <td> <f style="color:Black; font-size:12px; font-family:Verdana;">CustomerName: </f></td>
                <td class="header-data"><apex:outputField value="{!Account.Name}"/></td>


                </tr>

    </table>
</apex:page>
|improve this answer
0

@nikkey :

  1. Use on main table and two td.

  2. inside td use another table.

  3. Finally you will end of with 3 table, one main table and two tables inside td which will resolve your issues.

I used same logic to one of my requirement with repeat and it works fine.

below is td styling. 

 <td style="vertical-align:top;border-bottom: none;">

Thanks Pradeep

|improve this answer

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.