Tips for inserting a page break after every item in a loop in Visualforce when generating a PDF document

I need help with rendering a VF page as PDF. The VF page iterates over a list of account records using the repeat tag. I want to apply a page break for each element in the repeat tag. The code below is working, but it has an issue - it shows an empty PDF page after the last element. How can I avoid displaying an empty PDF page after the last page?

<apex:page standardController="Account" recordSetVar="accnts" sidebar="false" renderAs="pdf">
    <apex:pageBlock title="My Content" > 
        <apex:repeat value="{!accnts}" var="acc" rows="3" first="5" >   
            <div style="page-break-after:always">          
                <apex:outputText style="color: #f60; font-weight: bold;font-size:30px;" value="{!acc.Name}" >    
                </apex:outputText>
            </div>
        </apex:repeat>
    </apex:pageBlock>
</apex:page>

Thank you for your assistance.

Best regards,

Naveen

javascriptcsspdfsalesforcevisualforce

Answer №1

To enhance the appearance of your recurring element, incorporate inline-styling as advised by Salesforce:

<apex:repeat value="{!account.contacts}" var="c">
   <div class="breakPageAfter" style="page-break-after:always;">
        <span>{!c.name}</span>
   </div>
</apex:repeat>

Alternatively, you have the option to apply the styling in your CSS code:

<style>
   .breakPageAfter{
      page-break-after:always;
   }
</style

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the location of the cursor within 'ng2-ckeditor'

I'm a beginner with Angular 2 and I'm using 'ng2-ckeditor 1.0.7' in my Angular 2 application. The editor is functioning well within the app. However, I am now faced with the challenge of appending text at the cursor position. Unfortunat ...

javascriptangularckeditor

Disabling the global ajax datatype causes issues with Rails remote links

I have successfully developed a rails application that submits a form remotely and then displays form validation errors if the validation process fails. The form itself is working perfectly. However, I've come across an issue where the way I've ...

javascriptjqueryruby-on-railsjsoncoffeescript

Show popup window during servlet processing

I'm attempting to display a modal box in a Java servlet with the message "Please wait while your request is processed". I understand that I can make an AJAX call and manage the modal in the front-end code. Currently, I trigger the servlet when the us ...

javascriptjavahtmlservlets

Having trouble getting the full width of a hidden div to work properly?

I am facing an issue with a two-part menu design: the left side consists of a traditional UL, while the right side contains a link within a div element. The fixed-width of the right div is causing complications as the left div needs to occupy all remaining ...

htmlcss

The error message "app.use() function requires middleware function" appears when the app

Currently, I am in the process of learning node.js with express template engine by following a Udemy course called "Learn Node.js by Building 10 Projects". During one of the lectures, when the professor ran npm start localhost:3000, it worked fine for him, ...

javascriptnode.jsexpressmean

Is there a way to drop a pin on the Google Maps app?

Is there a way to pinpoint the specific location on Google Maps? <google-map id="map-container" width="100%" height="100%" class="maps"></google-map> ...

htmlcssangulartypescript

Issues with Bootstrap-slider.js functionality

I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a seamless navigation experience with Next.js: Implementing per-page layouts for efficient 2-link navigation on a single screen

In my next.js project, I have a URL like "http://localhost:3000/forum". If a user goes to "http://localhost:3000/forum/{postId}", I want to redirect them back to "http://localhost:3000/forum" My folder structure is in the 'App' directory and I h ...

javascriptreactjswebnext.jsnext.js13

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

csshtml

Merge the values of two select tags into a single textbox

There are two select Tags along with a text box included. <select name="select1"> <option>1</option> <option>2</option> </select> <select name="select2"> <option>1</option> <option>2 ...

javascripthtml

Adjusting cell width based on content in CSS to handle overflows automatically

I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow. After trying the solution mentioned here, all cells ended up with the same width. However, I requ ...

htmlcsshtml-tableoverflow

The ReactDom reference is not defined when working with React and webpack

After following a tutorial on React and webpack from jslog.com, I encountered issues with using updated syntax such as using ReactDom to call render instead of the deprecated 'React.renderComponent'. I tried running: npm install --save react-do ...

javascriptreactjswebpack

I need to find a way to identify when empty JSON data is being submitted to my RESTful HTTP POST endpoint. This issue is causing

I've set up a REST endpoint to handle JSON data sent via an HTTP post request using XMLHttpRequest as my client. Everything seems to be working smoothly until I wanted to test how the server would handle receiving no data at all, specifically null. To ...

javascriptnode.jsrestexpress

Tips for displaying JSON data by formatting it into separate div elements for the result object

Having recently started using the Amadeus REST API, I've been making AJAX calls to retrieve data. However, I'm facing a challenge when it comes to representing this data in a specific format and looping through it effectively. function showdataf ...

javascriptjqueryhtmljsonajax

failure to properly assign a property during model update in mongoose

My BaseSchema contains logic that should set values for two properties when a new Model is created: schema.pre("save", function (next) { if (!schema.isNew) { this.createDate = new Date(); this.createBy = "kianoush"; } next(); }); If updating, ...

javascriptnode.js

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

Is there a way to integrate a snap carousel in a vertical orientation?

I am looking to make a List utilizing the snap carousel component, but I'm having trouble getting it set up. Can anyone help me with this? ...

javascriptreact-native-snap-carousel

Node text: three.js and ngraph.tree working together

I am currently working on developing a 3D network (network of people) for a browser using three.js and ngraph. The graph has been successfully created, but the nodes are currently displayed as squares. My goal is to replace these squares with the text "nod ...

javascriptgraphthree.js

Using a Default Value in a Destructured Function Parameter Results in a ReferenceError

When working on setting a default value for the db in my CRUD functions for testing purposes, I encountered a peculiar issue that has left me puzzled. Here's the snippet of code that caused the trouble: import { db } from './firebase' func ...

javascriptfirebasetestingdefault-valuedestructuring

How can I simplify the CSS properties for this border?

I created a div named "commentbox" and I want to apply a border with the color #ccc. However, I only want the left, top, and bottom sides of the div to be bordered, leaving the right side untouched. Thank you! ...

htmlcssborder