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
VishwanathVishwanath 

How to use <div style="page-break-after:auto;">

Hi,

how to use <div style="page-break-after:auto;"> in the below code i  tried  but not worked

issue is when the page is going to second page it will displaing on the header please any one give some solution to

<apex:page controller="LetterController" sidebar="false" showheader="false" renderAs="PDF">
<html>
<head>
<style type="text/css">
            @page {          
                @top-center {                   
                    content: element(header);               
                            }
                @bottom-left {
                    content: element(footer);
                            }           
                 }                       
         
            div.header { 
                padding: -5px;              
                position: running(header);           
                        }           
            
            div.footer {
                padding:-5px;
                position: running(footer);                                   
                        }

        </style>
<style type="text/css">
    @page { 
        size: A4 landscape;

        }
    }
 </style>
<style type="text/css">
table
{

border-collapse:collapse;
}
table, td, th
{

border:1px solid black;
}

</style>
</head>
<body>
<form>
    <div class="header">   
                <img style="WIDTH:130px; HEIGHT: 80px" src='{!URLFOR($Resource.UOP)}' title="logo" align="right"/>
				
            </div>

            <div class="footer" align="center"> 
                <hr/>
                    <apex:outputText value="UOP Confidential" style="font-style:Arial;font-size:15pt;color :#000000" />
            </div>
                
				  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
				    <br/>
			
<table cellspacing="5" cellpadding="5">
	<div style="page-break-after:auto;">	
<tr>
<td ><b>name</b></td>
<td ><b>class</b></td>
<td><b>year</b></td>
<td><b>lname </b></td>

</tr>

<apex:repeat value="{!PUList}" var="p" >
<apex:repeat value="{!p.Payment_Throughput_Histroy__r}" var="pt">
<tr>
<td>

{!p.name}
</td>

<td>
{!pt.class}
</td>
<td>
{!pt.year}
</td>
<td>
{!pt.lname}
</td>
</tr>
</apex:repeat>
</apex:repeat>
</div>
</table>


</form>
</body>
</html>
</apex:page>

 Thanks,

 

how can i do this

ministe_2003ministe_2003

If you're trying to force a page break, use style="page-break-after:always" instead.  I'm not sure why you're putting a div inside a table tag, why don't you just put it in the "style" param of the table instead?
VishwanathVishwanath

Hi ministe 2003,

 

 

in my code when the table row will increase it will displaying on second page header image, how can i

avoid this...
ministe_2003ministe_2003

OK I get what you're saying.  Firstly you need to tidy your styles out.  You have three style sections which there's no need for.  You also have too many curly brackets.  Tidy it up so it looks like this.  Frankly, I'd be surprised if your styles were working properly before!

 

<style type="text/css">
  @page { 
    size: A4 landscape;
             
    @top-center {                   
      content: element(header);               
    }
    @bottom-left {
      content: element(footer);
    }           
  }                       
         
  div.header { 
    padding: -5px;              
    position: running(header);           
  }           
            
  div.footer {
    padding:-5px;
    position: running(footer);                                   
  }

  table {
    border-collapse:collapse;
  }
  
  table, td, th {
    border:1px solid black;
  }
</style>

 

Once you've corrected that, try running it and see if there's any differences.  I'd also remove the div from inside the <table> tags.

 

It might be something to do with the fact you're using an image instead of just text.  I see you're trying to align it to the right.  Try using float:right instead of align:right.  That should force the text to align around the image