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

Is OpenLayers + Ajax causing issues or errors?

Utilizing the code provided below to showcase an OpenLayers map within a DIV container presents a peculiar issue. Upon initial load of the webpage, the map does not display consistently - requiring multiple page refreshes in order for it to become visible. ...

Utilizing erb within a coffeescript file for modifying the background styling

Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...

What can cause jQuery to override the window.onbeforeunload function at times?

I've encountered a puzzling issue with jQuery version 1.6.x on my webpage. The problem arises with a simple call as shown below: window.onbeforeunload = function() { return 'Are you sure ?'; }; Surprisingly, this code doesn't work bec ...

Video files embedded using Shopify's HTML code may not be visible on iPhones

Hello everyone, I hope you can help me with my issue! I have successfully integrated an HTML video onto my Shopify homepage, but I am experiencing some trouble when trying to view it on an iPhone. Instead of the video playing, I see a blank box. Below is ...

Developing a dynamic master-details view on a single page with ASP.NET MVC

This is a question related to design and technology. When using ASP.NET MVC, it is possible to create a simple application with two views: one master view that displays all records in tabular form in read-only mode, and another details view for creating n ...

Different div elements are clashing with each other when it comes to hiding and

Having added multiple div elements with different IDs, I am facing an issue where clicking one div displays it while hiding the others. I am looking for a solution to prevent conflicts between the divs. Any suggestions on what might be causing this problem ...

Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line. My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle: .rotate { transform ...

Angular app - static List mysteriously clears out upon refresh

My goal is to create a login page using Angular. I have an Angular component with HTML, CSS, and TypeScript files that manage this functionality. The HTML file contains two fields (Username and Password) and two buttons (Login and Register). When a user en ...

The jQuery .post function is successfully executing, but it is strangely triggering the .fail method without

My data is successfully being posted, but I'm struggling to get my .post response handler code to work efficiently. The results seem inconsistent across different browsers and tools that I have tried. Here's the code snippet for the post: $.post ...

Printing content from an Angular dashboard can be achieved by following a few

Currently, I am working on developing a legal document automation program for my company. However, I have encountered an issue during the final stages of completing this web application. For the layout and setup, I am using the default angular Dashboard l ...

Using a hyperlink text instead of a button to make jQuery dialog functional

Although I managed to get it working, the issue is that it only works once. After the initial popup appears, the link stops functioning and the popup doesn't show up again unless I refresh the page. The code functions correctly within this JSFiddle ex ...

Sending a jQuery form to a node.js connect-form involves passing the form data through AJAX to

On the server side, I have implemented the following function as an expressjs middleware: function objCreation(req, res, next){ req.form.complete(function(err, fields, files){ if (err) { next(err); } else { // Set params in request ...

Evaluate One Input Value to Determine Another Input Value

Hey there, I've made an update to the fiddle but let me clarify what I'm trying to achieve. My goal is not to implement form validation as I already have that covered with the HTML5 "required" attribute. What I'm aiming for is to customize t ...

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

The POST variable consistently remains void

The approach I am using to handle the data sent with jquery.ajax involves sending an empty string by default. Whenever there is a change, I monitor the input for changes and resend the data. Everything seems to work fine in the console, but in PHP, $this-& ...

jQuery's class selector does not work for dynamically added labels

The HTML code appears to be: <label for="13"> <input id="13" value="13" type="radio" name="choice">S1&nbsp;&nbsp;&nbsp;S1&nbsp;&nbsp;&nbsp; </label> <label for="14"> <input id="14" value="14" typ ...

Is it possible to modify a scss style in Prestashop?

I have encountered an issue while using a default theme in Prestashop 1.6 that I need assistance with. My goal is to move the navbar up by 25px. I understand that I should make changes to #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which ...

Changing the structure of divs by using elements from different divs

I'm looking for some help with adjusting the CSS of a div when hovering over certain elements. Here is my current code: <div class = "container-main"> <div class = "container-inner"> <ul class = "list"> &l ...

What is the reason for JSHint alerting me about utilizing 'this' in a callback function?

While working in my IDE (Cloud 9), I frequently receive warnings from JSHint alerting me to errors in my code. It is important to me to address these issues promptly, however, there is one warning that has stumped me: $("#component-manager tr:not(.edit-co ...