My print style CSS code includes the following:
* {
display:none;
}
#printableArea {
display:block;
}
Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when printed, resulting in a blank page.
I have correctly added this stylesheet to the HEAD section with media="print" specified.
When an element is set to not be displayed, all its children will also remain hidden regardless of their own display properties.
The asterisk * selector matches the <html> element, causing the entire document to disappear from view.
To control visibility more effectively, it's important to target specific elements for hiding.
While your general approach is on the right track, consider using visibility: hidden instead of display: none to ensure that child elements remain visible.
For more information, check out this helpful link: Printing only the contents within a specific <div>
Responding because I stumbled upon this inquiry during my online search
To hide elements, try using the following instead of 'display: none':
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
reference : https://www.example.com/search-result-page
body * {
visibility:hidden;
}
#printableContent {
display:flex;
}
It is advisable to use !important for #printableContent if necessary.
If you're having trouble, consider elevating it above everything else. This simple solution resolved the majority of my issues, all I had to do was create a .noprint class and apply it to a few remaining elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
Looking to incorporate some JavaScript into your code? Check out this straightforward snippet that works without the need for jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
Enclose all content after the opening body tag within a div element. Prior to this wrapping div, insert a visible item's div.
I encountered a scenario where I needed to create a basic username-password login page. To achieve this, I had to conceal everything on the page except for the semi-transparent sign-in form's backdrop. Upon entering the correct credentials, the form would smoothly animate out, followed by the gradual disappearance of the half-opaque page overlay. Eventually, all hidden elements would become visible, allowing full access to the page's functionalities.
@media print {
* {
visibility: hidden;
}
/* Reveal element for printing, including its children. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Ensure all child elements are visible as well. Keep in mind that hidden elements can still impact the layout of other elements on the page. To address this, I simply included position: fixed; on .svgContainer elsewhere in my code.
If you're looking for a neat solution, consider the following approach:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
This method ensures that only the #printableArea element will be displayed in the print layout, with all other elements being concealed.
There is a simple solution that can be done in just one line:
Using jQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without relying on jQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both of these examples, make sure to customize the selector variable according to your specific requirements. For instance, you can use div#page:hover or p.class1,p.class2
To easily hide certain elements when printing a page, you can utilize the code snippet provided below. Assign the "hide" class to the specific element you wish to exclude from the printed version.
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
I'm currently working on creating a hero banner using the material-ui framework and I've encountered an issue. Here's what I have so far: https://i.stack.imgur.com/UXTDY.png However, I'm facing an irritating problem with left and rig ...
As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...
My goal is to accomplish the following: However, there appears to be an unnecessary gap above the Social icons div. You can view the live page at This is my current markup:- <header> <img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo ...
Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected. <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> ...
UPDATE I am looking to limit checkbox selection in specific sections on the same page. To prevent conflicting inputs from different sections, I believe using the label selector <label data-addon-name="xxx"> as a separator is the best appro ...
I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...
Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...
$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...
Can you help me solve a challenge I'm facing? I have a website with a fullsize background image, and I need to attach a div to a specific position on the image while ensuring that it scales in the same way as the background image with the "background ...
Is it possible to alter the color of an image hosted on a different website? Here is a link to an example image: Is there a technique to overlay a specific color on the image and only modify certain colors, such as changing or adding a layer of light gre ...
I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...
I was facing problems with flashing on the Safari/Firefox browsers. By setting the main container height to max-height: 100vh, I managed to resolve the flickering issue. However, I am also looking for a solution to keep track of the window.scrollY positi ...
Is it possible to create a fixed width right column in Bootstrap while keeping the left column responsive? I am currently working with Bootstrap 2.3.2 https://i.stack.imgur.com/xOhQo.png (source: toile-libre.org) I want the right column to maintain it ...
Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...
Is there a jQuery plugin or similar tool available that can change the color of each letter in the word "Google" to match the colors of the Google logo? For instance, if I have the following HTML markup: <span>Google AdWords</span> I would l ...
I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...
Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...
I created a div with an input field inside. I set the input field to autofocus, so when the page loads, the cursor is automatically focused on the input field. However, the cursor is touching the border of the input field, making it hard to see clearly. ...
Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...
Take a look at my code header img{ width:10%; vertical-align: middle; } header h1{ text-align: right; display:inline; position: absolute; } header { width : 100%; height: 1% ; background: red; } <!DOCTYPE html> <html> <head> <m ...