How to style a div for printing using CSS

Currently, I am working on a project that has already been completed but now requires some enhancements. To give you an overview, the project includes a search functionality that displays additional details upon clicking on the displayed name in the result. The client has requested the addition of a print option to allow printing the displayed content, which I have successfully implemented. However, the main issue arises with the print preview not taking into account the CSS from the last page as it is defined internally in the HTML code. I have tried referring to resources like "Print the contents of a DIV", but they utilize external CSS styles. Can someone guide me on how to incorporate internal CSS for the print preview?

Edit: I attempted using the @print tag to address the CSS issue but it did not work effectively, hence why I request assistance in keeping this question unique.

P.S. I did not create this poorly-coded section, it was created by someone else - see https://i.sstatic.net/QC3mH.png.

javascriptjqueryhtmlcssprinting

Answer №1

Finally, after much searching, I stumbled upon a solution. It baffled me why @media wasn't functioning properly, so I decided to incorporate CSS styling directly into the print function.

w.document.write('<style>h1{font-size:20px;color:#76C04E;width:90%;}</style>');
w.document.write('<style>body{background: #FFFFFF; color: #000000; font: 85% arial, verdana, helvetica, sans-serif; }</style>');

w.document.write('<style>.res td{font-size: 12px;font-family: open sans, arial; border-top: 1px solid #ddd; width: auto;padding: 4px;} </style>');

Now, the CSS is displaying correctly in the print preview page, although it seems to only work in Firefox. I'll update the answer once I figure out how to get it working in Chrome as well.

Thank you.

Answer №2

Don't forget to include the media print tag in your CSS file!

<link rel="stylesheet" type="text/css" href="print.css" media="print">

I always recommend using an external CSS file for better organization.

Make sure to use the media tag in your CSS file:

Put all your printing styles within @media print{...}

@media print {

    .header, .footer, .navigation{

    display: none !important; 

    } 
}

Remember, when it comes to printing, only include essential elements like headers and footers, and exclude menus and sidebars.

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

Ways to release the binding of an element and then re-enable it for future use

Encountering an issue with dynamically unbinding and binding elements using jQuery. Currently working on creating a mobile tabbing system where users can navigate using left and right arrows to move content within ul.tube. The right arrow shifts the ul.tu ...

javascriptjqueryhtmlcss

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

javascriptjqueryhtmlcssattr

Guide on populating a dropdown menu with values based on the selection of another dropdown menu

Could you please help with a situation involving two dropdown lists, one for country and one for state? I am trying to load states based on the chosen country value. I have set up an AJAX call and triggered the change event for the country dropdown. My m ...

jqueryajaxasp.net-mvcasp.net-mvc-3asp.net-mvc-4

"Encountering an unidentified custom element in Vue 2 while exploring Vue libraries

In my Vue project, I have integrated libraries like FusionCharts and VueProgressBar. However, I encountered an error in my console: Unknown custom element: <vue-progress-bar> - did you register the component correctly? For recursive components, make ...

javascriptvue.js

Troubleshooting issue: AngularJS - Updating variables in view without utilizing scope

I seem to be facing an issue with my Angular code. Some variables are not updating after their values have been changed. While my header updates correctly, the footer remains stuck with its initial values. Here is a snippet of my code: <body> < ...

javascriptangularjsvariablesupdating

IE8 experiencing issues with displaying Recaptcha AJAX API widget

Struggling with getting the Recaptcha widget to show up in IE 8, even though it works fine in Firefox, Safari, and Chrome. I've set up a feedback form that loads via AJAX when a user clicks a link, and I'm using the Ajax API directly to place th ...

jqueryajaxrecaptcha

Find the differences between the values in two arrays of objects and eliminate them from the first array

const arrayOne = [ { id: 22, value: 'hello' }, { id: 33, value: 'there' }, { id: 44, value: 'apple' } ]; const arrayTwo = [ { id: 55, value: 'world' }, { id: 66, value: 'banana' }, ...

javascriptangularjs

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui

Guide to implementing Infinite AJAX Scroll in jQuery with a continuous loop

Being a beginner in javascript, I am eager to learn new techniques. I am currently working on implementing an infinite Ajax scroll into my code. Here is a snippet from my php page: <div class="row row-sm padder-lg "> <?php foreach ($top->fee ...

phpjqueryhtmlajaxjquery-ias

Using Socket.IO in Node.js to distribute information to every connected client

Currently, I am in the process of developing a WebGL multiplayer game. My approach involves using socket.io and express in node.js to enable multiplayer functionality. However, I am encountering an issue with broadcasting key events. When a user presses a ...

javascriptnode.jsexpresssocket.iowebgl

RequireJs is failing to load a script based on its name

Recently, I delved into the world of RequireJs to enhance my understanding. However, I encountered a hurdle while trying to load a JavaScript dependency using its custom shortened name. Despite my efforts, I can't seem to figure out what I'm doin ...

javascripthtml

Switching between custom dropdowns in Angular

I've implemented a custom dropdown selector with the functionality to toggle when clicked anywhere else on the browser. The toggleModules() function is responsible for handling the toggling within the dropdown. Data: modules=["A", "B", "C", "D", "E", ...

javascriptangularjs

Using jQuery to dynamically populate select options based on JSON data

I have been testing and searching for a solution to my issue, but it still doesn't work. Any help would be greatly appreciated. I have three select options implemented in PHP like this: <div class="control-group" id="merkPrinter"> <label cl ...

javascriptjqueryhtmlajaxjson

Browsing an array of objects to extract targeted information

I'm in the process of developing a node express angular tool for analyzing Twitter statuses and I am facing the challenge of extracting text from it and combining it into a single long string for future use. This is how I am attempting to retrieve us ...

javascriptangularjsnode.jstwitter

State variable in Redux is not defined

While there have been numerous similar inquiries on this platform, I haven't been able to find a solution to my particular issue. Below is the React component in question: class MyTransitPage extends Component { componentDidMount() { this.pro ...

javascriptreactjsreact-nativereduxreact-redux

Calculating the difference between the old scrolltop and the new scrolltop in jQuery/Javascript

I have a seemingly straightforward question, yet I am struggling to find a solution. Each time a user scrolls, the scrollTop value changes. I want to subtract the previous value from the new value of the scrollTop. However, I am unsure how to store the old ...

javascriptjqueryscrolltop

Replace the plus signs in a string with spaces using the JSON.stringify method

When utilizing AJAX, I am sending the string someString to a PHP handler. xmlHttp.open("POST", url, true); var someString = 'Foo+Bar'; var params = 'operation='+operation+'&json='+JSON.stringify(someString); xmlHttp.send( ...

javascriptjsonajax

Explore the versatile Bootstrap Table for class

Recently, I created a table with the following structure: <table id="table" class="table table-bordered table-hover"> <thead> <tr> <th data-field="id" class="hidden">ID</th> <th data-fie ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Using Django's form within a jQuery dialog box

I am faced with a situation where I have a site that uses a main template called base.html, along with additional subpages rendered by separate views. The base.html template includes a menu that, when clicked, displays a jQuery dialog. My goal is to includ ...

jquerypythonajaxdjango

What is the process for sending tinyEditory's content using ajax?

I recently incorporated the StfalconTinymceBundle into a Symfony2 project and it is functioning perfectly. However, I am encountering a problem when trying to submit the editor's content through AJAX. The editor's content does not seem to be bind ...

javascriptajaxsymfonytinymce