dividing the content of a division into sections similar to a PDF file

I am currently working on a resume application and I am looking for a way to display the HTML preview of the resume in multiple divs or automatically insert a horizontal row if the content exceeds the height of the div. The goal is to make it look like separate pages similar to PDF documents, stacked one below the other. At the moment, everything is being displayed within a single div, which is not ideal given the dynamic nature of the resume fields and their heights. Each div should have a maximum height of 900px. Any suggestions on how to achieve this?

Below is the code excerpt:

<div class="container-fluid" style="line-height: 1.4;">  
            <div class="editSection"> <span class="editicon" ng-click="editSection(2)"><img src="images/editIcon.jpg" alt="edit" /></span><span style="font-size: 30px; font-weight: bold; text-align: center; display: block;">{{resume.basicDetails.firstName+" "+resume.basicDetails.lastName}}</span></div>
            <div class="editSection"> <span class="editicon" ng-click="editSection(2)"><img src="images/editIcon.jpg" alt="edit" /></span><span style="display: block; text-align: center; font-size:14px; ">Phone: {{resume.basicDetails.phone | tel}} | Email: {{resume.basicDetails.email}} |
Address: {{resume.basicDetails.address}}, {{resume.basicDetails.city}}, {{resume.basicDetails.state}} {{resume.basicDetails.country != 'United States' ? resume.basicDetails.country : ''}}</span></div><br>
            <div ng-if="resume.summary">
                <div style="text-align: center;" class="strike"><span style="font-weight: bold; font-size: 16px;">PROFESSIONAL SUMMARY</span></div><br>
                <div class="editSection"> <span class="editicon" ng-click="editSection(3)"><img src="images/editIcon.jpg" alt="edit" /></span>

...
angularjshtmlcss

Answer №1

If you want to split your content across different pages when printing, you can use the following technique.

window.print();
    
    @page {
        size: A4;
        margin: 0;
    }
    @media print {
        html, body {
            width: 210mm;
            height: 297mm;        
        }
        .page {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
        }
    }
<div class="book">
    <div class="page">
        Page 1/2 - Your content here
    </div>
    <div class="page">
        Page 2/2 - Your content here
    </div>
</div>

If you prefer, you can also utilize page-break-before

<div class="page-break"></div>

@media all {
.page-break { display: none; }
}

@media print {
.page-break { display: block; page-break-before: always; }
}


window.print();
@media all {
.page-break { display: none; }
}

@media print {
.page-break { display: block; page-break-before: always; }
}
<div>Some content BEFORE the page break</div>
<div class="page-break"></div>
<div>Some content AFTER the page break</div>
<div class="page-break"></div>
<div> ... More content after another page break ... </div>

Answer №2

Have you ever experimented with the CSS property "page-break-after" in your HTML code? It can be quite useful!

If you want to apply specific rules for printing, consider using this code snippet:

@media print {
    footer { page-break-after: always; }
}

For more information on this topic, check out this resource: https://css-tricks.com/almanac/properties/p/page-break/

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

Using Angular.JS to iterate over a nested JSON array using ng-repeat

I am currently working on a People service that utilizes $resource. I make a call to this service from a PeopleCtrl using People.query() in order to retrieve a list of users from a json api. The returned data looks like this: [ { "usr_id" : "1" ...

javascriptangularjsangularjs-ng-repeat

The Angular data model fails to update when the URL is modified

SOLUTION: var deferred2 = $q.defer(); It is important to place this inside the method _getSpecificPerson(), as visiting other Person promises in already resolved. This ensures that a new deferred object is created each time. Imagine having a list of perso ...

javascriptangularjs

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

javascriptphpjqueryhtmlajax

Incorporating a technique for aligning text towards the right as the number of characters or digits expands

I'm designing a game user interface with a money indicator. Let's imagine the player has 0 dollars in their wallet, it should appear like this: https://i.stack.imgur.com/35eoh.png Please note that it is located in the upper right corner. The p ...

htmlcsstextmove

What is the best way to transfer variables from an ng-template defined in the parent component to a child component or directive?

Is there a way to pass an ng-template and generate all its content to include variables used in interpolation? As I am still new to Angular, besides removing the HTML element, do I need to worry about removing anything else? At the end of this ...

javascriptangularjsangularangular-directiveng-template

When refreshing the page, Angular 1.5.0 duplicates the root template while using UI GRID with ocLazyLoad. The error "$$animateJs is undefined" is displayed

I am currently using the following versions of libraries: Angular, angular-animate both are v. 1.5.0 Angular UI Grid v. 3.1.1 ocLazyLoad v. 1.0.9 Angular ui router v. 0.2.18 The Error encountered is: TypeError: $$animateJs is not a function at d ...

javascriptangularjsangular-ui-gridoclazyload

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?

* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar img { width: 10%; height: auto; di ...

htmlcssimageweb

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

javascriptjqueryhtmlcss

show information from json onto an html page with the help of jquery

I'm looking to showcase buttons from a JSON file within a simple block. Here's the JSON data for movies: { "movies": [ { "title": "Mena", "movieid": "1", ...

javascriptjqueryhtmljson

Styling images and text in CSS within a jQuery UI autocomplete widget

I am currently using an autocomplete widget that displays text along with images. The results I have right now are not meeting my requirements. I want to customize the appearance of my results so that the words 'test' and either 'Federico&a ...

javascripthtmlcssjquery-ui

Tips for sending several values using multiple select input

I am seeking advice on the best way to insert multiple values into a table using a multiple select input that includes more than one value. Would it be better to use a single value separated by "|", or to use data attributes like data-id, data-price, etc? ...

phphtml

Why does IE make elements disappear when rotated 90 degrees in CSS3?

Why is Image 2 not visible in IE when transformed 90 degrees with some perspective? It works fine in other browsers, but IE always keeps you guessing for hours for no reason. Html : <body> <div class="scene"> <div cl ...

htmlinternet-explorercss

Java Chatclient with a User-Friendly HTML Interface

My team is embarking on a new project involving the development of a Chatclient to be integrated into a webapp. Our requirements include: - Java server - Java client We have nearly completed coding both the client and server, but now we face the challe ...

javahtmlapplet

The Jquery code for Fullpage.js is causing unexpected behavior on the HTML page

While following a tutorial at the given link, I encountered an issue. Around the 9:08 mark, the instructor adds some JavaScript and demonstrates that fullpage.js is working. However, when I refresh the page after implementing the new code, it doesn't ...

htmljquerybootstrap-4

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

javascripthtmlreactjs

Having trouble with Simplehtmldom's innertext function?

While working with simple_html_dom: I encountered the following code snippet: $j = ' <itemBody> <div>films - to watch (Simple Present)<br/> <textEntryInteraction responseIdentifier="RESPONSE_1"/> ...

phphtmlxmldomsimple-html-dom

Tips for preserving the contents of a list with HTML and Javascript

My latest project involves creating a website with a To-Do list feature. Users should be able to add and delete items from the list, which I achieved using JavaScript. Now, my next goal is to ensure that the current items on the list are saved when the pag ...

javascripthtmlcss

Design an HTML button/label with text and a starting width of zero

I'm attempting to design HTML buttons and labels with text that initially have zero width. Once inserted, they should smoothly transition to a visible state. I've tried adjusting the initial width and min-width style properties without success. ...

htmlcsswidthdart

What is the process of transforming this jQuery script into AngularJS code?

Currently I am facing a situation where I am utilizing Angular1.x for a project. On a specific subpage, there are small clickable images along with some additional content below these images. The requirement is that only the images should be visible init ...

javascripthtmlangularjs

What is the correct way to reach packages in the public directory from the node_modules directory in Node.js?

I currently have a MEAN stack application set up. Within the public folder, I also have an AngularJs application. Organization https://i.sstatic.net/38ADq.png In my index.html file, I am attempting to access a package that is located in the node_modules ...

javascripthtmlnode.jsmean-stacknode-modules