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
foodrunnerfoodrunner 

PDF CSS problem: leading (space between lines) is not rendering properly

I have been working on a custom pdf page with CSS for quite a while and have not been able to standardize spacing between text lines within a mult-line field (billing address). What do I need to change to add the uniform spacing? I have not moved my css into an external style sheet, though I plan to.

 

 

My challenge is with this portion of the page:

 

                <apex:outputField value="{!quote.BillingAddress__c}" styleClass=" header3" />
                <apex:outputField value="{!quote.Created_Date__c}" />
                <span style="margin-left:-176px; margin-top: 500px;">
                <apex:outputLabel value="">
                <apex:outputField value="{!quote.BillingAddress2__c}"/>
                </apex:outputLabel>
                                </span>
                <span style="float:left; margin-left:0px; margin-top:-15px;">
                <apex:outputField value="{!quote.ExpirationDate}"/>
                                </span>
                <span style="float:left; margin-left:-176px; margin-top:-15px; z-index:-8;">
                <apex:outputLabel value="">
                <apex:outputfield value="{!quote.BillingCountry}"/>
                </apex:outputLabel>
                </span>

 

 

 

 

Here is the entire visualforce page. I am not including the apex controllers as they are not applicable for this question.

 

<apex:page standardController="Quote" extensions="dataTableCons" standardstylesheets="false" renderAs="pdf" showHeader="false">
<head>
<style>
body { font-family: Arial Unicode MS; font-size: 10 px; } 

h3 {
    display:block; width:637px; padding:0; background:#ADD8E6;
    font-size:12px; line-height:23px; text-align:left; font-weight:normal;
}
h4 {
    display:block; width:637px; padding:0; 
    font-size:10px; line-height:12px; text-align:left; font-weight:normal;
}
h5 {
    display:block; width:637px; padding:0; 
    font-size:8px; line-height:12px; text-align:right; font-weight:normal;
}

.header
{
 width: 367x;
 height: 5px;
 background-color: gray;
 color: White;
 font-size:8pt;
 text-align: left;
 padding-left: 5px;
}
.header1
{
 width: 15px;
 height: 5px;
 background-color: gray;
 color: White;
 font-size:8pt;
 text-align: right;
 padding-left: 10px;
}
.header2
{
 width: 65px;
 background-color: gray;
 height: 5px;
 color: White;
 font-size:8pt;
 text-align: right;
 padding: 5px;
}

.tabletop {
    display:block; width:630px; height:5px; 
    background:transparent url(images/top.gif) no-repeat scroll 0 0;
    margin:0 0 0 4px;
}
.tablebk {
    width:615px;
    background:transparent url(images/middle.gif) repeat-y scroll 0 0;
    margin:0 0 0 4px; padding:0 0 0 15px;
}
.tablebottom {
    display:block; width:630px; height:16px; 
    background:transparent url(images/bottom.gif) no-repeat scroll 0 0;
    margin:0 0 0 4px;
}

table {table-layout:fixed; border-collapse:collapse; border-spacing:0; }

th {
    color:#fff; 
    font-size:14px; line-height:10px;
    padding:5px 6px 8px;
    vertical-align:top;
}
td {
    
    font-size:10px; line-height:10px;
    padding:3px;
    vertical-align:top;
}
th.col1,
td.col1 {text-align:left;}
.odd td {background-color:#f2f7fa;}

td input {
    width:85px; height:22px;
    font-size:14px; line-height:16px; font-weight:bold; text-align:left;
    padding-top:3px;
    border:null;
}

tr:hover td {background-color:#599bbd;} /* hover state does not work in ie6 */

/* table1 */
.table1 th.col1 {width:176px; }
.table1 th.col2 {width:181px;}
.table1 th.col3 {width:173px;}
.table1 td {padding-bottom:5px;}
.table1 td.col3 {padding-top:6px; padding-left:19px;}

/* table2 */
.table2 th.col1 {width:176px;}
.table2 th.col2 {width:181px;}
.table2 th.col3 {width:173px;}

/* table3 */
.table3 th.col1 {width:128px;}
.table3 th.col2 {width:153px;}
.table3 th.col3 {width:130px;}
.table3 th.col4 {width:95px;}
.table3 td {padding-bottom:5px;}
.table3 td.col4 {padding-top:6px; padding-left:19px;}
/* END Table CSS */


</style>
</head>

    <apex:form id="theForm">  
       <apex:pageBlock tabStyle="account">
            <apex:pageMessages />
         <apex:image url="/resource/1272645408000/Key_Logo" width="20%" height="20%"/>
           <Table class="table">
           <apex:pageBlockSection title="Essential Information" columns="2"  showHeader="false">
                <apex:outputField value="{!quote.Opportunity.AccountId}" styleClass="line-height='133px'" />
                <apex:outputField value="{!quote.quotenumber}" />
                <apex:outputField value="{!quote.BillingAddress__c}" styleClass=" header3" />
                <apex:outputField value="{!quote.Created_Date__c}" />
                <span style="margin-left:-176px; margin-top: 500px;">
                <apex:outputLabel value="">
                <apex:outputField value="{!quote.BillingAddress2__c}"/>
                </apex:outputLabel>
                                </span>
                <span style="float:left; margin-left:0px; margin-top:-15px;">
                <apex:outputField value="{!quote.ExpirationDate}"/>
                                </span>
                <span style="float:left; margin-left:-176px; margin-top:-15px; z-index:-8;">
                <apex:outputLabel value="">
                <apex:outputfield value="{!quote.BillingCountry}"/>
                </apex:outputLabel>
                </span>                
             </apex:pageBlockSection>

            <apex:pageBlockSection title="Contact Info" showHeader="true" >
                <apex:outputField value="{!quote.contactid}"/>
                <apex:outputField value="{!quote.Phone}"/>
                <apex:outputField value="{!quote.email}"/>
                <apex:outputField value="{!quote.fax}"/>
             </apex:pageBlockSection>

            </Table>

       </apex:pageBlock>
       
       </apex:form>

    <apex:pageBlock >
    <apex:pageBlockSection columns="2">
      <apex:dataTable value="{!Quote.QuoteLineItems}" rowClasses="even,odd," var="line"  width="630">
        <apex:column style="text-align:right;" headerClass="header1" headerValue="Item">
        <apex:facet name="Item">Item</apex:facet>
        <apex:outputText value="{!line.Quote_Item_Number__c}"/>
        </apex:column>  

        <apex:column style="text-align:left;
            border-left-style:solid; border-left-color:black;
            border-left-width:.25px;"
          headerClass="header" headerValue="Product">
        <apex:facet name="header">Product</apex:facet>
        <apex:outputText value="{!line.PriceBookentry.name}"/>
        </apex:column>        
        <apex:column style="text-align:right;
            border-left-style:solid; border-left-color:black;
            border-left-width:.25px;" headerClass="header2" headerValue="Quantity">
        <apex:facet name="header">Quantity</apex:facet>
        <apex:outputText value="{!line.Quantity}"/>
        </apex:column>
    <apex:column style="text-align:right;
            border-left-style:solid; border-left-color:black;
            border-left-width:.25px;" headerClass="header2" headerValue="Price Each">
        <apex:facet name="header">Price Each</apex:facet>
        <apex:outputText value="{!line.ListPrice}"/>
        </apex:column>
    <apex:column style="text-align:right;
            border-left-style:solid; border-left-color:black;
            border-left-width:.25px;" headerClass="header2" headerValue="Price Each">
        <apex:facet name="header">SubTotal</apex:facet>
        <apex:outputText value="{!line.Subtotal}"/>
        </apex:column>        
      </apex:dataTable>
      </apex:pageBlockSection>
   </apex:pageBlock>
  
        <apex:form >      
       <apex:pageBlock >
       <apex:pageBlockSection columns="2">
       <apex:inputhidden />
       <apex:inputhidden />
       <apex:inputhidden />
       <apex:outputField value="{!quote.Grand_Total__c}" style="h5" />
       </apex:pageBlockSection>

       </apex:pageBlock>
       <apex:pageBlock >
       <h4>
       This quotation is provided for budgetary planning purposes only. 
       This is not an official offer of sale, orders cannot be placed against this budget quotation. 
       Once project details have been fully defined, a final detailed quotation will be submitted.
       </h4>
       </apex:pageBlock> 
      </apex:form>

</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
SSRS2SSRS2

Hello foodrunner

  I beleve you want to show lines preserving with white spaces .Then you have to add style white-space:pre;

see for more refer

 

-Suresh

All Answers

SSRS2SSRS2

Hello foodrunner

  I beleve you want to show lines preserving with white spaces .Then you have to add style white-space:pre;

see for more refer

 

-Suresh

This was selected as the best answer
foodrunnerfoodrunner

The style code was perfect. Thank you