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 .

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

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

what is the best way to display camera view in full screen on an iOS application?

What method should I use on an iPhone to launch the camera in full screen mode? Additionally, how can I overlay a compass on top of the camera view on iOS? ...

htmlobjective-c

What is the reason behind the failure to update the state via a reducer and Object.assign?

I'm attempting to develop a reducer without utilizing ES6. It's an outmoded PHP application that lacks a build process for transpilation. I am initializing the state: let defaultState = { accountTypes: { individual: { c ...

javascriptreduxstateredux-actions

Step-by-step guide on permanently updating the text of select options with JavaScript

Here is the code for a select option with different values: <select id="test" onchange="changeContent()"> <option>1</option> <option>2</option> <option>3</option> </select> The javascript function that chan ...

javascripthtml

How can I arrange a specific array position in Vuejs according to the Id value?

<div v-for="(item, index) in gr" :key="space.id" class="val-name"> </div> After making a few modifications to the API call logic, I was able to achieve my desired outcome. However, the issue lies in the fact that ...

javascriptvue.js

A guide to using jqGrid: Retrieve the value of a particular cell by double clicking on a row

Is there a way to implement a feature where users can double click on any part of a row and have it open a new HTML page based on the specific content in a cell? For example, I have a table with different counties in New York listed in separate rows: Coun ...

javascriptjqueryjqgrid

Tips for arranging information in ng-repeat using nested objects within JSON data on AngularJS

Looking to display an array of object properties in an Angular view. Here is the object: $scope._Json = { "foo": { "ItemDimension1": { "Item": "item1", "ItemIndex": 1, "SelectedItems": [{ "C ...

javascriptangularjssorting

The current error message states that the function is undefined, indicating that the Bookshelf.js model function is not being acknowledged

I have implemented a user registration API endpoint using NodeJS, ExpressJS, and Bookshelf.js. However, I encountered an error while POSTing to the register URL related to one of the functions in the User model. Here is the code snippet from routes/index. ...

javascriptnode.jsexpressbookshelf.js

angular index.html code displayed

I successfully deployed an Angular app on a server in the past without any issues. The Angular version is 6.1.1, Angular CLI version is 6.2.9, npm version is 6.13.4, and node version is 10.18.0 for both local and server environments. The server is running ...

htmlnode.jsangulargitnpm

"Rotated element in Opera does not maintain event functionality when positioned outside its

Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...

cssrotationopera

Utilizing Regular Input with Material-UI's Autocomplete Feature

Is there a way to replace TextField with a regular input in an Autocomplete? ...

javascriptreactjsmaterial-ui

Utilize the composition API in Vue.js 3 to call a function and pass in a parameter

I'm having trouble calling a function from another component. When I click on a button in my parent component, formTelemarketing(), it should send data to my other component nAsignedCalls() and call the function getCalls(param) in that component. Thi ...

javascriptvue.jsvuejs3

Utilize JavaScript when sharing on social media to avoid the possibility of embedding the entire

This javascript code snippet is extracted from www.twitter.com (simply click to view the source code). I have reformatted it for better readability: if (window.top !== window.self) { document.write = ""; window.top.location = window.self.location; s ...

javascriptsecurity

Customizing File Size and Dimensions in Form Submission with Dropzone.js in JavaScript

I am currently experimenting with some sample code for Dropzone.js and am interested in finding a way to include the file size as a form field when submitting: var KTFormsDropzoneJSDemos = { init: function(e) { new Dropzone("#kt_dropzonejs_exam ...

javascriptdropzone.jsdropzone

Tips for creating a static PHP website with a fixed navigation bar and footer

I am looking to create a webpage with a consistent horizontal navigation bar and footer, but where the content changes dynamically based on the user's interactions with the navigation. For example: <div class="nav-bar"> /* The navigation bar r ...

javascriptphphtmlajax

When IntelliJ starts Spring boot, resources folder assets are not served

I'm following a tutorial similar to this one. The setup involves a pom file that manages two modules, the frontend module and the backend module. Tools being used: IDE: Intellij, spring-boot, Vue.js I initialized the frontent module using vue init w ...

javascriptmavenspring-bootintellij-ideavue.js

tips for sending an array from an HTML page to a PHP server via AJAX

I am having issues passing an array using jQuery with AJAX and back, but my code isn't functioning correctly. I've tried making changes multiple times, but it's still not working. Can someone please advise me on what to do? I suspect that my ...

phpjqueryajaxarrays

Tips for retrieving the checked status of a Material UI <Checkbox/> component and changing it to false upon clicking a different icon (such as a delete icon)

Greetings! I have encountered a problem that I am hoping someone can assist me with. I am looking for information or guidance on how to handle a specific issue. The challenge I am facing involves accessing the checked property of a material-ui <Checkbo ...

javascriptreactjscheckboxmaterial-uicomponents

Tips for creating a responsive Livewire Pagination system

Looking to make Livewire pagination responsive? When using Bootstrap, simply add flex-wrap to the pagination class to ensure responsiveness. Component: class Index extends Component { use WithPagination; protected $paginationTheme = 'bootstr ...

javascriptphplaravellaravel-livewire

Display a label upon hovering over an image

Is there a way to create an effect where upon hovering over an image, a pop-up image is displayed like this: Any suggestions on how I can achieve this using HTML and CSS? Thanks in advance! ...

htmlcss