Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

My current version of Chrome browser (54.0.2840.59) is exhibiting a strange behavior when attempting to print preview an HTML page I have developed. The print preview truncates the page content, displaying less than what should be shown. The content is not repetitive, ruling out any specific element causing the issue. However, when I print preview the same page in other browsers such as IE11, Edge, Firefox, and Safari, the entire content is visible. Here is a screenshot from Chrome's print preview mode: print preview truncates the rest of the page

In the image, it is evident that there is still a significant amount of content remaining after the end of the scroll in the print preview. Additionally, I have conducted tests on Windows 10, iOS, and even in incognito mode to rule out any add-ons causing the issue.

htmlcssprintingprint-preview

Answer №1

After some research, I stumbled upon a solution to my issue. The grid layout I had initially created was using bootstrap. Fortunately, I found a helpful discussion regarding this specific issue: https://github.com/twbs/bootstrap/issues/12078

To resolve the problem, I decided to switch the entire grid structure to display as a table with the use of !important declarations. This adjustment successfully addressed the issue at hand. It is worth mentioning that the community has also made modifications to the bootstrap column grid system to ensure consistent width for print, which seems like a more ideal solution.

In conclusion, the root cause of the problem stemmed from Chrome utilizing the XS size of the bootstrap layout, resulting in an incorrect calculation of the page height in my particular case.

Answer №2

To properly address this issue, consider implementing the following sass directives:

@media only print{
   // establish grid layout for .col-md to function sans media query
   @include float-grid-columns(md);
   @include loop-grid-columns($grid-columns, md, width);
   @include loop-grid-columns($grid-columns, md, pull);
   @include loop-grid-columns($grid-columns, md, push);
   @include loop-grid-columns($grid-columns, md, offset);
}

By utilizing these rules, you can ensure that bootstrap medium columns display correctly in print format.

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

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

htmljquerycsslaraveljquery-ui

Exploring the differences between React state and CSS :hover in the context of a dropdown menu that is accessible to both desktop users (via mouse) and

I have come across a dilemma regarding a dropdown menu that needs to cater to both Desktop/PC users (with mouse) and Mobile devices (with touch). After considering my options, here are the proposed solutions: OPTION 1 One approach is to implement it usi ...

javascriptcssreactjsdrop-down-menuhover

What is the best way to add shadow effects to a DIV using CSS?

Is there a way to add shadows within an element using CSS? I attempted the following method but it did not work: #element { shadow: 10px black; } ...

css

Reading and storing HTML source code in Python line by line

Recently, I embarked on the journey of learning Python 3. As I delved into my Python book, I found myself pondering some questions... One of my challenges is to extract key words from HTML source code. I managed to write code that allows me to open a URL ...

pythonhtmlpython-3.x

Avoiding the page from scrolling to the top when the sidebar is opened (NextJS, Typescript, TailwindCSS)

I'm currently working on a website that features a sidebar for smaller screens. While the sidebar functions properly, I would like to keep the background page fixed in place when the sidebar is active so it does not scroll. In my code, I have utilize ...

htmlcsswebnext.jstailwind-css

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

javascripthtmlcss

What is the best way to transfer weather data from a server to an HTML text area box?

Recently, I delved into the world of expressJS to set up a local server (localhost:3000). With the power of JavaScript (specifically in a file named app.js), I was able to send simple messages like "Hello World" to the browser. However, now I find myself f ...

javascripthtmlexpress

Select the radio button by hovering the mouse over it

Is there a way to check my radio buttons when hovering over them without having to click? I want to display photos based on the selected radio button. I attempted this using JQuery, but I am still learning and consider myself a beginner. ...

jqueryhtmlcss

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

What is the best way to incorporate styled components and interpolations using emotion theming?

I've been building a React web application with a dynamic theme feature using the emotion-theming library. This allows users to switch between different environments, each with its own unique theme. To achieve this, I created my own CustomThemeProvide ...

cssreactjstypescriptemotion

Utilizing Conditional Styling for an Array of Objects within a Textarea in Angular 6

My array contains objects structured as follows: list =[ { name:"name1", value:true } { name:"name2", value:false } { name:"name3", value:true } { name:"name4", value:false ...

javascripthtmlcssangularweb

The labels assigned to buttons will direct users to unique links specifically designated for that button

I've been working on a website to share some code I created, but my skills in HTML and CSS are not the best. Please forgive me if there are obvious mistakes. Here's the code I have so far: <!DOCTYPE html> <html> <head> ...

htmlcssw3.css

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

htmlcssangulartypescript

How is it possible that the form already comes with data filled in that I didn't input myself

I am currently working on a website using cakephp. Strangely, when I load the login form, both the username and password fields are already prefilled. The interesting part is that this information is not hardcoded anywhere in the form or controller files. ...

phphtmlcakephp

The application of styling to a CSS class is unsuccessful when the class is dynamically added through Angular

My goal is to create a header that moves with the page and stays fixed once it reaches the top. I am using Angular and came across a solution on Stack Overflow which suggested binding a class toggle to the window scroll event to achieve this effect by addi ...

htmlcssangularjs

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

javascriptjqueryhtmlajaxforms

When used, the jQuery selector returns the PreviousObject rather than the object that was selected initially

I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. How ...

javascriptjquerycss

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

Recently, I've encountered a strange issue with my XAMPP test server while working on a game project. Everything was running smoothly until I noticed that when I make changes to certain files in Notepad++ and save them, the updates are not being refle ...

javascriptjqueryhtmlxampp

"Using the d-flex class with Bootstrap 4 tables does not allow them to expand to

Since the latest version of Bootstrap 4, it has become more challenging to apply classes like col-md-2 directly to the tr or td elements of a table. A possible solution is to use class="d-flex" in the parent element: <tr class="d-flex"> However, w ...

htmlcssbootstrap-4widthcolumn-width