The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing:

/** Custom Print Styles **/
@media print {
    header,
    .menu,
    footer {
        display: none;
    }

    ...
    ...
    ...
}

After testing the print functionality, I encountered an issue where the last page would not print if it contained only a few lines. This problem was resolved by adding additional text to the first page to ensure there were enough lines in the document.

This is the script used for printing:

$("body").on("click", ".btn-print", function() {
    window.print();
});

Attempted printing using Ctrl + P also resulted in the same issue persisting.

Answer №1

The problem was resolved with the following solution:

@media print {
    body, h1, h2, h3, ol, ul, div, span, p {
        display: block !important;
        width: auto !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }

    ...
    ...
}

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

Can you use AJAX to retrieve the same URL in both HTTP and HTTPS protocols?

Is it possible to configure AJAX requests to retrieve files based on the protocol being used in the browser? I am aware that AJAX requests cannot be made from HTTP to HTTPS, so we are currently working on making content available through both protocols. F ...

Creating a customizable theme for a website built with Bootstrap, incorporating changes to brand colors and more, by utilizing a .less file

I have built my asp site using bootstrap as the client-side CSS framework. I am currently working on implementing a feature that allows users to customize their site's brand color and other aspects, with these changes being saved permanently. While I ...

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a

Snippet of HTML: <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}& ...

What is the best way to design unconventional grids using Bootstrap 4?

Is it possible to achieve unique grid layouts in Bootstrap 4? For instance, An irregular grid where the first column covers two rows, followed by two rows with three columns each |||||||||||||||| | | | | | | |_ |_ |_ | | | | | | |_____| ...

Alter the Default Visibility on an HTML Page from Visible to Hidden with JavaScript

I found this code snippet on a website and made some modifications. On my webpage, I have implemented links that toggle the visibility of hidden text. The functionality is working fine, but the issue is that the hidden text is initially visible when the p ...

Exploring the textures of an imported 3D model mesh with multiple materials in A-Frame and Three JS

Currently, I am exploring A-Frame using a 3D model imported from Blender. Some parts of this model contain multiple meshes with two or more materials assigned to them. It is easy for me to adjust the material properties of meshes with just one material. ...

Revise the color of the selected image

click here for image description I'd like the area's color to change when the mouse hovers over it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

preventing users from selecting past dates on Full Calendar Plugin

Is there a way to disable the previous month button on the full calendar? Currently it is April. When I click on the previous button, the calendar shows March instead of disabling. How can this be prevented? http://jsfiddle.net/6enYL/ $(document).ready( ...

Leaving the "OK" button untouched in the sweet alert dialog

While implementing sweet alert in my project, I encountered an issue where the button text was not changing and the cancel button was missing on some pages. On certain pages, it only displayed OK. You can see a screenshot below for reference. https://i.s ...

Having difficulty with launching a new browser popup using JavaScript

I'm exploring ways to redirect users using JavaScript and open a new browser popup in Chrome/FF/Safari and IE. I need to wait for the response with the correct URL after the button click. While solutions like creating a new popup before the request a ...

Implement dynamic changes to uib-tooltip-html content

Is it possible to combine content on a uib-tooltip-html like shown in the following example? app.controller("testController", function($scope, $http, $interval, $sce) { $scope.text = $sce.trustAsHtml('<div>Some text</div>'); ...

Is there a way to efficiently access checkboxes by their IDs and toggle classes without the need for redundant classes and functions?

In my current project, I have set up functionality to toggle classes on a table for hiding specific columns. This is determined by checkboxes selected by the user above the table, each checkbox having its own unique ID like "product_1", "product_2", and so ...

Fade in text effect using jQuery on a Mac computer

Trying to create a smooth text fading effect across different browsers using jQuery. In the example below, you may notice that during the last part of the animation when the text fades in, the font weight suddenly increases causing a jerky/clunky appearan ...

Achieving a Pushing Footer Design with Content

Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: . Here is my HTML/CSS code for the footer: ...

How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

I am currently working with an HTML file structured like this.. <html> <body> <table border="1" cellpadding="5"> <tr> <td>Some Fixed text here</td> <td id="data">---here data as per values in external text file--- ...

Toggling dropdown menus with conditional Jquery statements

I am experiencing some discomfort. :) I've been working on a calorie calculator that includes a dropdown for various dietary preferences. Currently, when a user clicks the button, the dropdown appears and disappears when clicking outside the button. ...

Browserify is unable to locate the 'jquery' module

While attempting to package my app with browserify, I encountered the following error message: Cannot find module 'jquery' from '/home/test/node_modules/backbone' I have searched for solutions to this issue, but none of them seem to ...

Utilizing jQuery Mobile and PhoneGap to incorporate HTML files into data-role=page: A step-by-step guide

I am looking to load HTML files into a data-role=page using jQuery Mobile and PhoneGap. My project consists of several small HTML files with separate pages. In my implementation, I have: index.html: <!DOCTYPE html> <html> <head> ...

What is the best way to make a child div's height match its parent's height?

I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...

Combine filter browsing with pagination functionality

I came across a pagination and filter search online that both function well independently. However, I am looking to merge them together. My goal is to have the pagination display as << [1][2] >> upon page load, and then adjust to <<[1]> ...