Creating a resilient CSS: DOM for seamless printing in PDF or on physical printers

I need help with formatting a list of col-6 elements (bootstrap) inside a row element so that the content of each block remains intact in a pdf preview generated using print(). I attempted to use various css properties like page-break and break as suggested in this thread, but it didn't work as expected.

var dom = document.querySelector("#list");
dom.innerHTML = dom.innerHTML.repeat(6);
print();
#list>* {
  padding: 20px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: always;
  page-break-before: always;
  break-after: page;
  break-before: page;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a140a16">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="list">
  <div class="col-6">
    <p>
      Content goes here...
    </p>
    <p>
      More content here...
    </p>
  </div>
</div>

htmlcsspdfbootstrap-5

Answer №1

After some troubleshooting, I managed to resolve the issue by making a simple change in the CSS code. By switching the display property of the container from flex to block and adding float: left to the child elements, the layout started functioning as intended.

var element = document.querySelector("#list");
element.innerHTML = element.innerHTML.repeat(6);
print();
#list {
  display: block;
}

#list>* {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  float: left;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d21">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="list">
  <div class="col-6">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales sem nisl, ut ultricies purus laoreet efficitur. Morbi lectus orci, ultricies a nulla eget, volutpat molestie risus. Proin eget ipsum fermentum, tincidunt eros et, efficitur turpis.
      Pellentesque vehicula vestibulum nibh eu iaculis. Donec et rutrum felis. Donec rutrum ex elementum, faucibus sem non, blandit velit. Nunc vitae nibh quam. Aenean bibendum consectetur nisl et tincidunt. Aenean dui nisi, accumsan vitae ipsum eu, sagittis
      pellentesque turpis. Suspendisse semper ac sem non mattis.
    </p>
    <p>
      Nam nec ultrices augue. Cras ut lorem felis. Vivamus ante est, pulvinar sit amet porttitor et, aliquet condimentum eros. Sed quis elementum ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend diam nibh, at tristique magna
      facilisis ut. Phasellus felis diam, scelerisque ac hendrerit nec, elementum nec diam. Vivamus tellus nulla, lobortis sit amet iaculis vel, blandit et dolor. Nam semper odio quam, eu venenatis mauris vehicula pulvinar. Curabitur nibh nibh, tempus
      vel tortor id, porttitor consectetur mauris. Cras sagittis ullamcorper est eu dignissim. Nam odio ligula, pellentesque vel enim quis, vehicula tincidunt neque. Donec bibendum id nibh sit amet eleifend.
    </p>
  </div>
</div>

Answer №2

One way to modify the CSS specifically for printing is by using

@media print {
    
}

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

The row count feature is ineffective in Materialize CSS when adjusting the text area

Can the row count of a text area in materialize css be initialized with a specific number using "rows='20'"? How can we adjust the default row count? Here is an example of code that attempts to set the row count but doesn't work: <div c ...

htmlcssmaterialize

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

javascriptjquerycsshtml

The mysterious height phenomenon when setting the width of a list item with jQuery

Consider a basic ul and li setup similar to this: <div id="middle"> <ul> <li> <a> bridal </a> </li> //.... </ul> </div ...

jqueryhtmlcsscross-browser

Implementing React inline styles by directly incorporating brackets into the HTML rendering

I'm working on a project in React using create-react-app and trying to apply an inline style. Based on my research, the following line of code should work fine: <div id="root" style={{ height: 'auto' }}></div> However, when I r ...

cssreactjs

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

React Icons and Browser Tab Alerts

Is there a way to incorporate notifications into my website's favicon when the browser tab is not in focus? My tech stack includes React, Material UI, and TypeScript. I assume this is a frequent requirement, yet I haven't come across a simple so ...

htmlreactjsnotificationsmaterial-uifavicon

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

javascripthtmlcssfontsfont-size

Exploring the Depths of HTML with Jquery

This is an example of HTML code I am working with: <tr> <td> <div><span id="temp" /> </div> </td> </tr> <tr> <td> <div><span id="temp" /> </di ...

jqueryhtml

Using PHP to narrow down SQL results by date

When it comes to populating an HTML table with data from an SQL table using PHP, I have a specific method in place. Here's how I go about it: <table class="posts"> <?php $respost = mysqli_query($link,"SELECT * FROM table WHE ...

phphtmlmysqldatetime

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

Text cannot be highlighted within DIV element

Check out this page and this page on my website. Text within the advert DIV tag cannot be selected, and some text in the Incinerator product page is unselectable in the topic-div above the iframe element containing a YouTube video. Here is the relevant HT ...

csshtml

Reaching SVG with CSS

Is it possible to target SVG elements with CSS? In older versions of IE, they display like broken images and I want to hide them using modernizr. I'm looking for a solution like the following... .no-svg object[type=svg] { display:none; } I have be ...

csssvgcss-selectors

Checking for correct HTML tags using JavaScript

Looking to validate some input in javascript and confirm if it is a valid HTML tag. Any straightforward methods with JQuery for this task? If not, any suggestions on how to achieve this using Regex? Thank you! ...

javascriptjqueryhtmlregex

The function window.scrollBy seems to be causing a conflict with jjmslideshow, resulting in the page being unable to

I wrote a simple script to create a "smooth scroll" effect when a specific link is clicked: (function() { 'use strict'; // Checking for compatibility if ( 'querySelector' in document && 'addEventListener' in window ...

javascriptjqueryhtmlcss

Is it possible for a div nested within another div to still occupy space on the page despite being set

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $("select#choosebook").change(function(){ $(".title").slideDown(" ...

javascripthtmlcss

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive. However, one major issue I've ...

htmlcssrubyflexboxhaml

How to hide offcanvas navigation bar with one click in Bootstrap 5

There was an issue with a Bootstrap 5 project where the offcanvas menu would remain open after clicking on an anchor link. Is there a way to automatically close the offcanvas menu after clicking on an anchor link? <nav class="navbar fixed-top py ...

javascriptjquerycssbootstrap-5

Show results from selecting multiple dropdown options

I am looking to create a search function that displays results based on multiple dropdown selections. I have 4 dropdown menus and a submit button, but I am unsure how to show the search results upon clicking the submit button. The desired outcome is to dis ...

phphtmlmysqlcodeigniterdrop-down-menu