Issue with page break functionality during print preview

div.pagebreak {
 page-break-after: always;
 page-break-inside: avoid; 
}

HTML

 <!-- Page separator -->
  <div class="pagebreak" style="float: none;"><hr class="hidden-print" /></div>
  <app-mud-check-header [report] ="mudCheckWorksheet"></app-mud-check-header>

The given code snippet above is intended to add a page breaker, however it does not seem to be functioning as expected. Despite trying variations such as break-after and break-inside, everything continues to print on a single page. Any suggestions for troubleshooting?

htmlcssangulartypescriptpage-break

Answer №1

Upon reviewing your code, it appears that there are instances where the page break may not function as expected if the tag or parent element possesses specific properties.

  1. instances involving page breaks within table structures
  2. situations with floating elements present
  3. occurrences with inline-block elements included
  4. cases featuring block elements with borders

Answer №2

When it comes to printing an HTML document, the page-break-after and page-break-inside CSS properties play a crucial role in determining where page breaks should be inserted. However, it's important to note that the page-break-after property is only effective when used on block-level elements like divs, not on inline elements such as text.

If you're encountering issues with page breaks, one trick you can try is applying the page-break-after property to a parent block-level element that contains the problematic div with the pagebreak class.

div.pagebreak {
  page-break-after: always;
  page-break-inside: avoid; 
}

.parent {
  page-break-after: always;
}

<div class="parent">
  <div class="pagebreak">
    <app-mud-check-header [report] ="mudCheckWorksheet"></app-mud-check-header>
  </div>
</div>

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

Error: WebStorm's Language Service has timed out while executing TSLint operations

While working on my Mac running MacOS Sierra with WebStorm (version 2017.2.4), I encounter a pop-up notification sporadically, as shown in the following image: https://i.sstatic.net/mdVtd.png My coworkers and I all have the same TSLint configuration and ...

typescriptnpmwebstormtslint

Encountering an issue with Masonry's container.append that is causing an Uncaught TypeError: Object does not possess the filter method

I have implemented infinite scroll on my website to display images. The images are arranged using a tool called masonry. Initially, I only load 10 images into the #container div when the page loads. These images are aligned perfectly with no errors in the ...

javascriptjqueryhtmljquery-masonryinfinite-scroll

Using SASS variables in JavaScript: A guide

My JavaScript file contains a list of color variables as an Object. export const colors = [ { colorVariable: "$ui-background" }, { colorVariable: "$ui-01" }, { colorVariable: "$ui-02" }, ... ] The Object above is derived from a scss file whic ...

javascriptcssreactjsscss-mixinsreact-16

Issue with functionality of Bootstrap template generated by Visual Studio 2013

I've set up a new ASP.NET MVC project using the latest Bootstrap 3 template, but I'm encountering an issue. There doesn't seem to be any spacing between the header navbar and the content displayed below by Renderbody(). I've attempted t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3visual-studio-2013

The putImageData function claims that the given object is not an ImageData object, but upon inspection in the console, it clearly displays that it is

After using getImageData to store the pixels of an image in a two-dimensional array, I attempted to draw them with putImageData. However, I encountered an error indicating that the first parameter is not of type ImageData. Strangely, when I logged the vari ...

javascripthtmlhtml5-canvas

Unable to apply margin right to React Material-UI table

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used: <TableContainer> <Table sx={{ mr: 100 }} aria-label="customized table"> <TableHead> <Tabl ...

htmlcssreactjsmaterial-uimaterial-table

Identify the month in which there is no data available in the database

The existing query is working perfectly, but the issue is that there is no data for the current month (April), causing it not to list the month with 0 interviews. How can I make it so that the month is listed with 0 interviews? QUERY select distinct from ...

phphtmlmysqlsql

Angular - ngbDropdownMenu items are hidden from view, but their presence is still detectable

Hey there! I'm currently working on a school project and I'm aiming to implement a drop-down menu. Surprisingly, it's proving to be more challenging than expected. <div class="parrent"> <div class="row"> ...

htmlcssangularstylesdropdown

Creating a sophisticated union type by deriving it from another intricate union type

I have a unique data structure that includes different types and subtypes: type TypeOne = { type: 'type-one', uniqueKey1111: 1, }; type TypeTwo = { type: 'type-two', uniqueKey2222: 2, } type FirstType = { type: 'first&apo ...

typescript

Steps for automatically incrementing a number when adding an item to an array using Angular

I am currently working on adding values to an array and displaying them in the view. Everything is functioning correctly, but I would like to include an auto-incrementing number with each item. The initial array is stored in a data.json file. [ {"i ...

angular

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

javascriptjqueryhtml

Preventing image flickering in SvelteKit: A guide

Upon the initial loading of a website, you may notice that the images tend to flicker or flash when transitioning between them. However, once these images are stored in the browser's cache, subsequent visits to the site will display the images seamles ...

typescriptsveltekit

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

I am looking to customize the font size of \section and \subsection in doxygen's html output. Additionally, I want to include numbering for the sections and sub(sub)sections in the format: 1 Section1 1.1 Subsection1.1 1.1.1 Subsubsection ...

cssformattingdoxygen

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, ...

cssangularsassangular-material

When transmitting data from NodeJS, BackBlaze images may become corrupted

I have been facing a challenge in my React Native app where I am attempting to capture an image and then post it to my NodeJS server. From there, I aim to upload the image to BackBlaze after converting it into a Buffer. However, every time I successfully u ...

node.jstypescriptreact-nativeaxiosbackblaze

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

htmlcss

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate

Incorporating a CSS file within a JSP page

I've been struggling to get my '.jsp' file to utilize a '.css' file that I created. Initially, I stored the '.css' file in the 'WEB-INF' folder but discovered that this folder is not accessible publicly. So, I m ...

javahtmlcssjsp

Uploading an image using ajax with multer

When using Multer to upload an image file to my Node server, I keep getting 'undefined' when trying to use ajax to send the image. Ajax : image = $("#input-file-img").val() const data = new FormData(); data.appe ...

javascripthtmlnode.jsajaxmulter

What is the reason behind the absence of a hide/show column feature in the Kendo Grid for Angular?

In my Angular application, I have implemented a Kendo Grid for Angular with the columnMenu feature enabled. This feature allows users to hide/show columns from a popup: Surprisingly, upon checking the ColumnMenu documentation, I noticed that there are no ...

angulareventsevent-handlingkendo-grid