Issue encountered when attempting to print a Bootstrap table using Google Chrome

Encountering a strange issue while attempting to print my webpage in Chrome. Using Bootstrap, I have a table that adjusts perfectly to the screen size but gets cropped when trying to print in Chrome, unlike Firefox where it prints perfectly.

Here is a link to JSFiddle where I reproduced the bug: here.

The HTML code for my table is as follows:

<table class="table table-condensed">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="...">
            <td>...</td>
            <!-- ... -->
        </tr>
        <tr class="separator empty" />
    </tbody>
</table>

Any suggestions on fixing this issue?
Perhaps utilizing different Bootstrap CSS classes for the table?

htmlcssangularjstwitter-bootstrapgoogle-chrome

Answer №1

Setting a starting zoom level caused everything to be displayed when printing.

@media print {
    body {
        zoom: .8
    }
}

Example: http://jsfiddle.net/HB7LU/11671/

Answer №2

Bootstrap 3 has a notorious bug related to responsiveness in printed styles, which has yet to be resolved in Bootstrap 4.

In my experience, switching from using col-sm-* classes to col-xs-* classes solved the issue perfectly.

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

What is the best way to display an AngularJS expression using a ternary operator?

Can AngularJS expressions be shown in a ternary operator? If so, can someone please provide guidance on how to achieve this? Thank you in advance. I have attempted the following, but it is not working as expected: {{ jdFile ? "Job Description File : {{fi ...

javascriptangularjshtml

CSS: Trouble with getting SVG sprite to work

I am struggling to combine all my SVG icons into one sprite and then call it from CSS as a background-image, similar to how we do with other images. However, the icons are not showing up on the page. When I open the SVG image in my browser, I encounter thi ...

csssvg

When using CSS column-fill auto, the printed page breaks are disregarded

The column-fill:auto property functions by filling one complete column before moving on to the next. .two-column { column-count: 2; column-fill: auto; } In Chrome, this behavior is consistent while viewing on screen, but when printing and encounterin ...

cssgoogle-chromecss-multicolumn-layout

Update a particular class following an AJAX POST request in JavaScript

After conducting extensive research, I have come here seeking your assistance with a particular issue: I am using a comment system with multiple forms on the same page (utilizing FOSCommentBundle in Symfony). My goal is to be able to post comments via Aja ...

javascriptjqueryhtmlajaxsymfony

Start Your Sentences with an Exclamation Point using an AngularJS Filter

When working with AngularJS, I encountered an issue while filtering a list of objects using ng-repeat: <tr ng-repeat="application in page.applications | filter: {DisplayName:page.ApplicationSearchValue}"> {{application.DisplayName}} </tr> ...

angularjsangularjs-filter

Sorting a list utilizing AngularJS, including null values

I'm working with a scope object that contains null values in a list, and I need to sort this list in ascending and descending order while always keeping the null values at the end. While one approach could involve splitting the object into two lists - ...

angularjs

Angular memory leakage is a common issue that can arise

Having trouble with memory leaks in Angular 1.2.6 when switching views? You're not alone. Even after thorough research on how to fix memory leaks in Angular, the problem persists. It seems like the DOM is not being released when views are switched. ...

angularjs

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Looking to achieve a CSS3 linear transition for a "list-style-image" specifically for Firefox? You'll need to include "-moz-" in your code. -moz-transition: list-style-image 0.2s linear; However, the above code is not producing the desired result. I ...

htmlfirefoxcss

What is the process for including echo HTML field in the WooCommerce order view?

I have successfully added HTML input fields within functions.php. However, these echoed fields are not displaying in WooCommerce orders after placing an order. I am looking for a way to include the values and labels of these fields in the orders view wit ...

javascriptphpwordpresshtmlwoocommerce

How can I create a one-column layout in CSS grid where one element automatically fills the remaining space after the other elements have taken their own auto widths?

I want a flexible layout with auto width columns for future additions. Avoiding extra wrappers is preferred. CSS grid is the preferred method over flexbox (although flexbox can achieve it with wrappers). This layout is intended for a navigation bar Here&a ...

htmlcsscss-grid

Once the page is refreshed, the checkbox should remain in its current state and

I have a challenge with disabling all checkboxes on my page using Angular-Js and JQuery. After clicking on a checkbox, I want to disable all checkboxes but preserve their state after reloading the page. Here is an example of the code snippet: $('# ...

javascriptjqueryhtmlangularjscheckbox

What is causing the divs to stack vertically instead of aligning horizontally?

I have encountered an issue with the layout of my HTML code. The inner divs are appearing in a lower row instead of horizontally inside the outer div with horizontal scrolling. I have already tried using properties like white-space:nowrap, but the proble ...

htmlcssreactjs

Exporting CSS file from css-loader in Webpack: A step-by-step guide

My application structure is set up like this: /src /app.js /styles.css /images /img.png The content of the app.js file is as follows: const styles = require('./styles.css'); console.log(styles) // => I want a URL to t ...

javascriptcsswebpack

What is the reason that select is unable to show the values that have been chosen

I'm struggling to understand why the code below isn't showing the selected value. Any assistance would be greatly appreciated. <select ui-select2 ng-model="associations" style="width:200px" multiple ng-options="whse.WarehouseName for whse ...

angularjsui-select2

What could be the reason for the gap that shows up when transitioning from one image to the

Check out my website at: This section discusses: https://i.sstatic.net/WTTxJ.gif At the bottom of the image, a 'gap' appears. Instead of using standard HTML img tags, I used Next.js Image like this: <Image src="https://ticket- ...

cssimagenext.js

AngularJS: iterating through an array to compare values and progressively adding them to a new array

Given an Array containing multiple values, I am looking to identify and extract any values that are equal to each other. If there are more than 1 instance of the same value, those values should be placed in a new array. For example: for(var i=0; i< ...

arraysangularjssortingcompare

The Chrome developer console is alerting that the Typescript file needs to be updated and is currently

Just made an update to my typescript file in my app and ran it. Source maps are enabled. When I check in Chrome by pressing F12 and browsing to the script, I see the .ts file without the recent function I added, but the .js file does have it. I tried fo ...

typescriptgoogle-chromevisual-studio-2017

Is there a way to create an animation for changing .text in response to an on click event?

I'm currently developing a simple calculator that increases a variable when a button is clicked, displaying the updated value in a div. Each click on the 'amount-upwards' button adds 200 to the displayed number. Below is the jQuery code I a ...

jquerycssanimation

Switch out fontawesome icons for SVG icons

I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...

htmlsvgiconsbootstrap-5font-awesome-5

Tips for retrieving specific data for display in an AngularJS application utilizing Node.js and MongoDB

Currently, I am in the process of developing a MEAN stack blog application. My main objective is to retrieve a specific "blog" from a list of blogs (displayed using ng-repeat) stored in my Mongo database via a Mongoose schema and then render it in a separa ...

javascriptangularjsnode.jsmongodb