Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view.

Unfortunately, I attempted the following method without success. Any advice or solutions would be greatly appreciated.

@media print {
            
      .print_only {
          display: block;
          visibility: visible;
      }
}
<div class="print_only" style="visibility:hidden; display:none"> THIS IS THE MOST DIFFICULT QUESTION OF THE CENTURY </div>

javascripthtmlcss

Answer №1

The reason why it is not showing up is because the inline style display:none is taking precedence over the style assigned to the class print_only. You can learn more about CSS specificity by checking out this informative article.

To fix this issue, you should add the following code to your CSS file:

.print_only {
     display: none; 
}

This code should be placed outside of the @media print block and you should remove the inline style from your HTML. This will ensure that the desired content displays correctly on your website.

Answer №2

To ensure that the display property is applied properly, remember to add !important after setting it to block. This will help override any inline styles on the element. Alternatively, you can also use the following CSS:


.hide_printer {
    display: none;
}

I trust this solution proves useful for your needs!

Answer №3

Successfully completed using the following technique.... Grateful for everyone's help, especially @pokeybit

.print_only {
            display: none;
        }
    
        @media print {
            
            
            .print_only {
                display: block;
                visibility: visible;
            }
            
            body * {
                visibility: hidden;
            }
            #print_area, #print_area * {
                visibility: visible;
            }
            #print_area {
                position: absolute;
                left: 0;
                top: -100px;
            }
        }

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

Which is better for testing in Cypress: classes or functions?

When it comes to testing in Cypress, which approach do you believe is more efficient? Functions: 'support/pages/login.js' export const login = (username, password) => { cy.get('#username').type(username); cy.get(& ...

javascriptnode.jstestingautomationcypress

Discovering the status of a wrapped component using Jest

const wrapper = mount( <ContextProvider> <FreeformEquationQuestionPractice question={question} /> </ContextProvider> ) console.log('freeform state: ', wrapper.childAt(0).instance().state) FreeformEquationQues ...

javascriptreactjsjestjsenzyme

Is there a way to adjust the positioning of an image within a <div> element?

I'm attempting to vertically align an image within a horizontal menu bar. My goal is to adjust the padding/margin of the image using inline CSS. However, I've noticed that when I add margin-top or padding-top, it affects the positioning of all m ...

cssalignment

AngularJS options for selecting items: radio buttons and checkboxes

I am currently working on creating a concatenated string based on the selection of radio buttons and checkboxes. There are two radio button groups and one checkbox group. One of the radio button groups is functioning correctly, but the other automatically ...

javascripthtmlangularjs

css boxShadow merger

Looking to create a sleek horizontal navigation bar using an unordered list with list items representing each element: To ensure the elements fit perfectly within the bar, I set the width of each at 25% and added a box-shadow for a border. Using a traditi ...

htmlcss

Transform the Node.js requests for both GET and POST methods to utilize Ajax

I am new to JavaScript and am currently learning how to send requests from a Node.js backend using Ajax for GET/POST operations. My backend is connected to a MySQL database and I have been studying some tutorials to gain a better understanding. Here is an ...

javascriptjquerymysqlnode.jsajax

Filtering dynamically generated table rows using Jquery

I'm currently working on a project that involves filtering a dynamic table based on user input in a search bar. The table contains information such as name, surname, phone, and address of users. Using jQuery, I have created a form that dynamically ad ...

javascriptjqueryhtml

What is the process for linking my website hosted on an external server to the database running on XAMPP on my local machine?

Currently, I have been working on a project website using XAMPP. The site includes a database where users can register and store their information. Initially, my plan was to test the website with friends by physically giving them my laptop. Unfortunately, ...

phphtmldatabasexampplocalhost

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

javascript various backgrounds on click

I have implemented a list to allow users to select their top 3 choices, and I am using JavaScript to track these selections and change the background color accordingly. 1st selection -> Green background 2nd selection -> Yellow background 3rd sel ...

javascriptcss

Enable or disable options with the user's permission

Currently, I am developing a WordPress plugin that will display a simple div on all pages. The code is set up to create the div, turn it into a shortcode, and then show it on each page. I want to include a checkbox in the admin settings so that users can ...

javascriptjqueryhtmlwordpress

How to preselect an option in a select list using vueJS

Within my VueJS application, there is a select option present in a form that looks like this: <!-- Schedule type --> <div class="container mx-auto flex bg-white px-6 py-1 space-x-2"> <dashboard-input-label class="col-sm-2 ...

javascriptvue.js

Displaying one out of two elements when the button is clicked

Trying to implement two buttons on the parent component, each displaying a different component - one for itemlist and the other for itemlist2. Struggling to get it right, even after following an example at https://codepen.io/PiotrBerebecki/pen/yaVaLK. No ...

javascriptarraysreactjsif-statementonclick

Automatically Resizing an iFrame Height Upon Submit Button Click

Currently, I am facing an issue with a form that generates an iFrame for the Payment section. While the height of the iFrame is set correctly, whenever there are errors in the form submission and error messages appear, they push the submit button below t ...

javascriptjqueryiframe

Right and left floating elements align side by side

The alignment of the images and file labels needs adjustment to ensure they all appear on the same line. Below is the code snippet that I have tried: HTML: <div> <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')} ...

csstwig

Is creating an expanding tab in CSS a difficult task?

I am in the process of developing a college website and I am curious about the difficulty level involved in creating an expanding tab on the side of the webpage. The idea is that when users hover over the tab with their mouse, it would expand to reveal add ...

htmlcsstabs

Why is the complete object not being saved in the mongoose subdocument array?

I encountered a problem with my two nested schemas, where one is inside the other as an array. Even though I tried to push into the array and save the subdocument, it didn't save correctly. The saved object only includes its _id without any other fiel ...

javascriptnode.jsmongodbexpressmongoose

New post: The vue component that was released lacks CSS (NPM)

For the first time, I am releasing a Vue component on NPM and everything seems to be in order, except for one issue - the CSS is missing. While it functions perfectly when tested locally, after installing the npm package in a test project and importing the ...

cssvue.jsnpm

Struggling with the proper state updating in React hooks when using dynamic naming conventions?

I am currently working with a react component that handles login requests to my server. This component is housed within a modal using Material UI. <TextField onChange={handleChange} autoFocus name="email" ...

javascriptreactjs

Experience the captivating AUTOPLAY feature of the mesmerizing FULLSCREEN SLIT SL

I am currently utilizing a slider that is functioning well, however I am encountering an issue with autoplay. Whenever I click on the navigation arrow or Nav dot at the bottom of the slider, the autoplay feature stops working. For more information, please ...

javascriptjqueryhtmljquery-slider