display select items from a webpage

Despite researching many topics, I am still unable to get this to work.

My goal is to hide certain elements on my webpage when the user tries to print it.

I am currently using Bootstrap 5, which includes the following CSS:

@media print{.d-print-none{display:none!important}}

To implement this, I simply added it to the HTML like this, for example:

<div class="d-print-none">Some text</div>

However, when I press CTRL+P, all the text still shows up for printing.

I also attempted to create my own CSS:

@media print{
    
    .noprint{
        display: none !important;;
    }
 }

Unfortunately, the elements are still not hiding when I try to print them. Any suggestions?

html css printing media-queries bootstrap-5

Answer №1

After trying various solutions, I found that the following method is the only one that works for me:

By defining

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

and adding the following CSS rules inside that file:

.noprint{
        display: none !important;
    }

It seems that the reason this works is because all my CSS links have media="screen", causing the @media print to be disregarded.

So using a separate

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

seems to be the solution.

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

Create a dynamic and interactive website using a combination of jQuery and AngularJS

I recently came across an interesting tidbit on the FAQs of Angular stating that "Angular can use jQuery if it's present in your app when the application is being bootstrapped". This got me thinking, is it considered a best practice to include both j ...

javascript jquery html angularjs

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascript jquery html css input

Gathering video links from various sections of a site

I am currently using Selenium for web scraping. My goal is to extract all the video URLs from 626 products spread across 25 pages. However, I am facing an issue where it only gives me the href link of the thumbnail image source instead of the actual vide ...

python html selenium selenium-webdriver web-scraping

When the button is clicked, populate a new form with information from the model

As a newcomer to stackoverflow and django, please excuse me if my description is lacking in detail. This is the models.py file: from django.db import models # Create your models here. SPORTS_CHOICES = ( ('nfl', 'NFL'), (&apos ...

jquery html django django-models django-forms

Unable to assign focus to textbox

In my chrome extension, I have implemented two text boxes - one for entering a URL and the other for LDAP. Upon clicking on the extension icon, a popup page opens where I automatically fill the URL text box with the current page's URL using the code s ...

javascript html google-chrome google-chrome-extension

Sorting outcomes based on HTML file

Attempting to narrow down results based on certain criteria within a large HTML file. Unsure if my query is attainable, but it never hurts to inquire. Currently immersed in a browser game featuring a vast map measuring 100x100, with each pixel representing ...

html vb.net html-agility-pack

unable to download file and missing image display

I need assistance with creating a download link using the anchor tag in my code. However, the link is not working as expected and the image is not displaying either. <td><img src="{{book.book_image}}" alt="{{book.name}}" width= ...

python html django

"Fixing issue with Checkbox not getting checked using a combination of jQuery and

My array called `totalCheckBoxArray` contains the values [1, 2, 3]. I also have checkboxes with values 1, 2, and 3: <div class="card-body"> <h5>Document List</h5> <div class="form-check"> ...

javascript jquery html

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascript html css css-transitions

Large padding in the main container of Bootstrap 4

Hey there, this is my third and hopefully final question. I'm having some trouble with my page layout that was supposed to look like this initially: [navbar] [1][2][3] I was aiming to achieve the following effect when res ...

html css twitter-bootstrap bootstrap-4

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

php html css javascript mysql

Tips on displaying a successful message and automatically refreshing the page simultaneously

I am working on a JSP Servlet code that utilizes AJAX to handle user data. In the success function of AJAX, I aim to display a success message to the user and clear all fields in the form by reloading the page. Unfortunately, when the page reloads, the a ...

jquery html ajax

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...

Is there a bug or user error causing CSS float not to be applied in Chrome?

I've encountered an issue with Chrome's rendering in my web application that seems to be intermittent. When I switch the float property between "left" and "none", Chrome doesn't reposition the elements properly. Interestingly, Firefox and I ...

html css google-chrome css-float

Choosing a color while hovering over the navigation bar

I'm trying to modify the color of my navigation bar when hovering over it with the mouse. Currently, it's black but I want it to change to a light grey or white color. What am I missing here? HTML: <!DOCTYPE html> <html> <head ...

html css twitter-bootstrap colors

Add the output of an SQL query to an HTML table using Powershell

I have multiple databases from various SQL Servers. I am attempting to output SQL data to an HTML table using Powershell from these different databases/SQL Servers, and then send it via email. Although my current script is functioning, it generates multip ...

html sql-server windows powershell automation

The battle of line-height versus padding for achieving vertical centering with one-lined text

One-lined text can be vertically centered using either the line-height property or by adding padding-top and padding-bottom. What are the advantages and disadvantages of each method? body { font-size: 12px; font-family: ...

html css centering

Unable to create a horizontal navigation bar

After spending a considerable amount of time on this task, I am perplexed as to why the navbar is not aligning horizontally. I have tried various techniques such as floating to the left and using display inline, but nothing seems to be working. Could there ...

html css navbar dreamweaver

Is there a way to determine if the browser window is currently in use?

The code I am currently working with looks like this: let focus; function setFocus() { focus = true; } function hideWindow() { focus = false; } window.onfocus = setFocus(); window.onblur = hideWindow(); The intention behind this code is to use it in the ...

javascript html google-chrome google-chrome-extension

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

javascript css minify google-closure-compiler yui-compressor

CSSer Q&A