Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
VibrateVibrate 

How to double space rows in VisualForce PDF PageBlockTable

 Here is the code that works well but output one line per row.  The new requirement is to output a blank row after each data row.  Any and all help is appreciated.

 

<apex:pageBlockTable value="{!sc}" var="u" style="width:100%">
                    <apex:column >                       
                        <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15"/>        
                    </apex:column>
                     <apex:column style="width:100%">
                        <apex:outputText value="{!u.stringConditionsText}" style="width:100%"/>
                     </apex:column>                      
</apex:pageBlockTable>

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

Hey I just used this 

And seems working

 

<apex:page standardController="Contact">
    <apex:form id="frm" >
     <apex:pageBlock >
     <table border="0" width="100%">
      <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                   
         </td>
         <td>All instruments must be placed in accordance with current NewCode's Accessibility Policy &amp; Guidelines for Humanitarian Support locations important water ways and by ways </td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
      <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                   
         </td>
         <td>All instruments must be placed in accordance with current NewCode's Accessibility Policy &amp; Guidelines for Humanitarian Support locations important water ways and by ways All instruments must be placed in accordance with current NewCode's Accessibility Policy &amp; Guidelines for Humanitarian</td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
   </table>
   </apex:pageBlock>
    </apex:form>
</apex:page>

 

 

So the actula code should be 

 

<apex:page standardController="Contact">
    <apex:form id="frm" >
     <apex:pageBlock >
     <table border="0" width="100%">
      <apex:repeat value="" var"s">
       <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                   
         </td>
            <td>{!s.SomeField__c}</td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
         </apex:repeat>
   </table>
   </apex:pageBlock>
    </apex:form>
</apex:page>

 

All Answers

souvik9086souvik9086

I think it will be better if you use apex:repeat for this req.

 

Hope it helps

 

<table border="0" >

<tr>

<th>Image</th>

<th>String Conditions</th>

</tr>

<apex:repeat var="cases" value="{!Account.Cases}">

<tr>

<td><apex:image id="theImage" value="/img/checkbox_checked.gif"  height="15"/></td>

<td><apex:outputText value="{!u.stringConditionsText}" /></td>


</tr>
<tr>

<td><apex:outputText value=""/></td>

<td><apex:outputText value="" /></td>


</tr>

</apex:repeat>

 </table>

If this post is helpful please throw Kudos.If this post solves your problem kindly mark it as solution.

Thanks
VibrateVibrate

Thanks very much for the speedy response.  I am getting the double space but the image and the corresponding text are on separate lines.  Do you know how I could get both to stay on the same line?
souvik9086souvik9086

Hello,

 

I edited the above post. Please see that. See what happens and let me know.

 

If this post is helpful please throw Kudos.If this post solves your problem kindly mark it as solution.

Thanks
VibrateVibrate

Hello,

 

Thanks again for all you help.  Here is what I have but the data is still displayed on two rows:

 

<apex:repeat var="u" value="{!sc}">
                   <table border="0">
                       <tr>
                      <th></th>
                      <th></th>
                      </tr><tr>   
                           <td style="white-space:nowrap;">
                              <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15"/>                             
                              <apex:outputText value="{!u.stringConditionsText}" />
                           </td>
                      </tr>
                      <tr>
                         <td >   
                             <apex:outputText value="" />      
                         </td>
                         <td>        
                             <apex:outputText value="" />      
                         </td>
                        </tr>
                     </table>
                  </apex:repeat>
Avidev9Avidev9

Try this

 

<apex:repeat var="u" value="{!sc}">
   <table border="0">
      <tr>
         <th></th>
         <th></th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>
            <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>
            <div style="clear:both"/>
         </td>
      </tr>
      <tr>
         <td >
            <apex:outputText value="" />
         </td>
         <td>
            <apex:outputText value="" />
         </td>
      </tr>
   </table>
</apex:repeat>

 
VibrateVibrate

Avi,

 

Thanks very muich for helping me with this issue.  However, your suggested solution did not work.  I am still getting the image and text on separate lines.

 

Thanks

Vibrate
Avidev9Avidev9

made some minor changes !

 

<table border="0" width="100%">
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>
            <apex:outputText value="TEst" style="float:left"/>
            <div style="clear:both"/>
         </td>
         <td>Some Value</td>
      </tr>
      <tr>
         <td >
            <apex:outputText value="Value 1" />
         </td>
         <td>
            <apex:outputText value="Value 2" />
         </td>
      </tr>
   </table>

 Have a look at the screen here https://www.diigo.com/item/image/4279c/9vim
VibrateVibrate

 

Avi,

 

I have a lot more text than your example.  My text is similar to the following (Imagine this as two seperate lines each prefixed by the image).:

 

All instruments must be placed in accordance with current NewCode's "Accessibility Policy & Guidelines for

Humanitarian Support locations Along important water ways and by ways".

 

Waterway repair may require reasonable grind and overlay a minimum of 40' (max. 650') on each side of excavation

as directed by NewCode Senior Engineer.

 

 

Thanks,

Vibrate
Avidev9Avidev9

Do one more thing

 

assign a fixed width to the TD. well change it according to your need

 

<td style="white-space:nowrap;" width="300px">
            <div>
             <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>
            <apex:outputText value="TEst" style="float:left"/>
            <div style="clear:both"/>
            </div>
         </td>
VibrateVibrate

Avi,

 

I just setup a Diigo account would it be possible to contact me thru that medium?

 

Thanks,

Vibrate
VibrateVibrate

Avi,

 

Here is what I have but the display is still putting the image on a separate line from the text:

 

<apex:repeat var="u" value="{!sc}">
                   <table border="0">
                     <tr>
                      <th></th>
                      <th></th>
                      </tr>
                      <tr>   
                           <td style="white-space:nowrap;" width="300px">                           
                             <div>
                                  <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>  
                              <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>                             
                                                     <div style="clear:both"/>
                                                       </div>
                                                           </td>
                      </tr>
                     <tr>
                         <td >   
                             <apex:outputText value="" />      
                         </td>
                         <td>        
                             <apex:outputText value="" />      
                         </td>
                        </tr>
                     </table>
                  </apex:repeat>

Thanks,

Vibrate
VibrateVibrate

 

Avi,

 

I don't know if this is helpful but changing the width makes the text to wrap less/more depending on increasing/decreasing the width.

 

Thanks,

Vibrate
Avidev9Avidev9
remove the style attribute from td and add width="100%" to table tag
VibrateVibrate

Avi,

 

Here is what I have but I am still getting separate lines for the two elements.

 

<apex:repeat var="u" value="{!sc}">
                   <table border="0">
                     <tr>
                      <th></th>
                      <th></th>
                      </tr>
                      <tr>   
                           <td width="100%" >                           
                             <div>
                                  <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left;"/>  
                              <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>                             
                                                     <div style="clear:both"/>
                                                       </div>
                                                           </td>
                      </tr>
                     <tr>
                         <td >   
                             <apex:outputText value="" />      
                         </td>
                         <td>        
                             <apex:outputText value="" />      
                         </td>
                        </tr>
                     </table>
                  </apex:repeat>

Thanks,

Vibrate
Avidev9Avidev9

Can you post the actual html generated ?

and I asked you to add width to table tag
VibrateVibrate
Avi,

I moved the width to the table tag with the same result. The output is a PDF. Is there a way to get the HTML output from the PDF output?

Thanks,
Vibrate
Avidev9Avidev9
remove renderAs tage from the page
VibrateVibrate

Avi,

 

Here is the HTML:

 

</table></span></td></tr><tr><td class="data2Col " colSpan="2"><br /></td></tr><tr><td class="data2Col " colSpan="2">
                   <table border="0" width="100%">
                     <tr>
                      <th></th>
                      <th></th>
                      </tr>
                      <tr>   
                           <td>                           
                             <div></td></tr><tr><td class="data2Col " colSpan="2"><img id="j_id0:upPDFForm:j_id2:j_id58:j_id63:0:theImage" src="/img/checkbox_checked.gif" height="15px" style="float:left;" width="15px" /></td></tr><tr><td class="data2Col " colSpan="2"><span style="float:left">All instruments must be placed in accordance with current NewCode's "Accessibility Policy &amp; Guidelines for Humanitarian Support locations important water ways and by ways".</span></td></tr><tr><td class="data2Col " colSpan="2">                             
                                                     <div style="clear:both"></div>
                                                       </div>
                                                           </td>
                      </tr>
                     <tr>
                         <td></td></tr><tr><td class="data2Col " colSpan="2"></td></tr><tr><td class="data2Col " colSpan="2">      
                         </td>
                         <td></td></tr><tr><td class="data2Col " colSpan="2"></td></tr><tr><td class="data2Col " colSpan="2">      
                         </td>
                        </tr>
                     </table></td></tr><tr><td class="data2Col " colSpan="2">
                   <table border="0" width="100%">
                     <tr>
                      <th></th>
                      <th></th>
                      </tr>
                      <tr>   
                           <td>                           
                             <div></td></tr><tr><td class="data2Col " colSpan="2"><img id="j_id0:upPDFForm:j_id2:j_id58:j_id63:1:theImage" src="/img/checkbox_checked.gif" height="15px" style="float:left;" width="15px" /></td></tr><tr><td class="data2Col " colSpan="2"><span style="float:left">Waterway repair may require reasonable grind and overlay a minimum of 40' (max. 650')on each side of excavation as directed by NewCode Senior Engineer.</span></td></tr><tr><td class="data2Col " colSpan="2">                             
                                                     <div style="clear:both"></div>
                                                       </div>
                                                           </td>
                      </tr>
                     <tr>
                         <td></td></tr><tr><td class="data2Col " colSpan="2"></td></tr><tr><td class="data2Col " colSpan="2">      
                         </td>
                         <td></td></tr><tr><td class="data2Col " colSpan="2"></td></tr><tr><td class="data2Col  last " colSpan="2">      
                         </td>
                        </tr>
                     </table>

 

Thanks,

Vibrate
Avidev9Avidev9

ou have some problem with the code have a look here

 

<tr>
   <td class="data2Col " colSpan="2">
      <img id="j_id0:upPDFForm:j_id2:j_id58:j_id63:1:theImage" src="/img/checkbox_checked.gif" height="15px" style="float:left;" width="15px" />
   </td>
</tr>
<tr>
   <td class="data2Col " colSpan="2">
    <span style="float:left">Waterway repair may require reasonable grind and overlay a minimum of 40' (max. 650')on each side of excavation as directed by   NewCode Senior Engineer.</span></td>
</tr>
<tr>

 Please check your code. have a look at the above code the image and text are placed in different td.

 

Well one suggestion try to wrap the table inside a <apex:ouputPanel layout="block">

else if it doesnt work post your visualforce code
VibrateVibrate
Avi,
You are right the output apex tags seem to be generating additional tr and td tags. The code has both image and text in the same td element but I belive ViduslForce is generating additional tags. I will try using the outputPanel as suggested when I return from my meeting.
Thanks,
Vibrate
Avidev9Avidev9
try to wrap the whole table not the outputText. The Whole table!
VibrateVibrate

Avi,

 

As you suggested, I wrapped the entire table in the output panel, but it did not make a difference.  The image and text are still being displayed on separate lines:

<apex:repeat var="u" value="{!sc}">
                   <apex:outputPanel id="newPanel" layout="block">
                   <table border="0" width="100%">
                     <tr>
                      <th></th>
                      <th></th>
                      </tr>
                      <tr>   
                           <td  >                           
                             <div>
                                  <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15px" height="15px" style="float:left;"/>  
                              <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>                             
                                                     <div style="clear:both"/>
                                                       </div>
                                                           </td>
                      </tr>
                     <tr>
                         <td >   
                             <apex:outputText value="" />      
                         </td>
                         <td>        
                             <apex:outputText value="" />      
                         </td>
                        </tr>
                     </table>
                </apex:outputPanel>
                    </apex:repeat>

Thanks,

Vibrate
Avidev9Avidev9

What is the exact code in your page ?

Please check if there is any change in the HTML generated ?
Avidev9Avidev9

Well overlooked the code! I found a conflict!

The repeat tag should be inside the table!

 

   <table border="0" width="100%">
<apex:repeat var="u" value="{!sc}">
      <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>
            <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>
            <div style="clear:both"/>
         </td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
    </apex:repeat>
   </table>
VibrateVibrate

Avi,

 

Again thanks for alll your help.  Here is what I have but I am still getting the output on separate lines:

 

 <apex:outputPanel id="newPanel" layout="block">
                   <table border="0" width="100%">
                    <apex:repeat var="u" value="{!sc}">
 
                       <tr>
                      <th></th>
                      <th></th>
                      </tr>
                      <tr>   
                           <td  >                           
                             <div>
                                  <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15px" height="15px" style="float:left;"/>  
                              <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>                             
                                                     <div style="clear:both"/>
                                                       </div>
                                                           </td>
                      </tr>
                     <tr>
                         <td >   
                            &nbsp;                      
                                </td>
                         <td>        
                             &nbsp;      
                         </td>
                        </tr>
                      </apex:repeat>
                       </table>
                </apex:outputPanel>

Thanks,

Vibrate
Avidev9Avidev9
I cant guess!
the idea is there are extra td and tr inserted in your page that shouldnt be there!.

I tried this myself and my html came pretty clean, not sure where you are wrong
VibrateVibrate

Avi,

 

I just want to thank you for your help.  I really appreciated the time you spent trying to help me solve this issue.  If I find a solution I will make sure to add it to this post.

 

Thanks,

Vibrate
Avidev9Avidev9
By anychance you have this inside a pageblock ?
can you take it out ?
Avidev9Avidev9

I am not sure what is the code/css there if everything fails you can give it a try

 

<apex:repeat var="u" value="{!sc}">
                          
<div style="margin-top:15px;margin-bottom:15px;white-space:nowrap;">
  <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15px" height="15px" style="float:left;"/>  
  <apex:outputText value="{!u.stringConditionsText}" style="float:left"/>                             
</div>
</apex:repeat>

 
VibrateVibrate

Avi,

 

I removed the code from inside the "pageBlock" but got the same result as when it was inside the "pageBlock".

 

Thanks,

Vibrate
VibrateVibrate
Avi,

Just like last time, the HTML generated is creating two rows, one for the image and one for the text.

Thanks,
Vibrate
VibrateVibrate

Avi,

 

With this code I don't get the double-spacing but it keeps the image and the text on the same row even though the rows are singled-spaced.  In the generated HTML I can see that both items are in the same "tr" tag.

 

<apex:pageBlockTable value="{!sc}" var="u" style="width:100%">
                    <apex:column >                       
                        <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15"/>        
                    </apex:column>
                     <apex:column style="width:100%">
                        <apex:outputText value="{!u.stringConditionsText}" style="width:100%"/>
                     </apex:column>                    
                   </apex:pageBlockTable>

Thanks,

Vibrate
Avidev9Avidev9

Hey I just used this 

And seems working

 

<apex:page standardController="Contact">
    <apex:form id="frm" >
     <apex:pageBlock >
     <table border="0" width="100%">
      <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                   
         </td>
         <td>All instruments must be placed in accordance with current NewCode's Accessibility Policy &amp; Guidelines for Humanitarian Support locations important water ways and by ways </td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
      <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                   
         </td>
         <td>All instruments must be placed in accordance with current NewCode's Accessibility Policy &amp; Guidelines for Humanitarian Support locations important water ways and by ways All instruments must be placed in accordance with current NewCode's Accessibility Policy &amp; Guidelines for Humanitarian</td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
   </table>
   </apex:pageBlock>
    </apex:form>
</apex:page>

 

 

So the actula code should be 

 

<apex:page standardController="Contact">
    <apex:form id="frm" >
     <apex:pageBlock >
     <table border="0" width="100%">
      <apex:repeat value="" var"s">
       <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                   
         </td>
            <td>{!s.SomeField__c}</td>
      </tr>
      <tr>
         <td >
            &nbsp;
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
         </apex:repeat>
   </table>
   </apex:pageBlock>
    </apex:form>
</apex:page>

 

This was selected as the best answer
VibrateVibrate

Avi,

 

This is doing exactly what I need.  YOU ARE THE MANNNN!:

 

<apex:pageBlock >
     <table border="0" width="100%">
      <apex:repeat value="{!sc}" var="u">
       <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td style="white-space:nowrap;">
            <apex:image id="theImage" value="/img/checkbox_checked.gif" width="15" height="15" style="float:left"/>                                  
         </td>
            <td>{!u.stringConditionsText}</td>
      </tr>
     
         </apex:repeat>

Thanks,

Vibrate
Avidev9Avidev9
Finallyy!!!!!!!!!!