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 have a JSF page where I am using an input range element. I want to add a different style class before and after the input range. Specifically, I want to display a plus icon (ui-icon-plusthick) before the input and a minus icon (ui-icon-minus) after the i ...
Is there a way I can apply different CSS classes to specific indexes within a string? For example, consider this string: "Tip. \n Please search using a third character. \n Or use a wildcard." I know how to target the first line with CSS using : ...
I attempted to modify the data attribute in my code snippet below. After clicking on the square, the data attribute should be incremented. However, it appears that the incrementing is not happening as expected. How can I resolve this issue? Additionall ...
Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...
Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted usin ...
Lately, I've been working on a webpage dedicated to educating people about Mars. I wanted to spice things up by using an image as the background for my HTML5 page instead of the usual plain white color. However, just inserting a .jpg link didn't ...
I've been scouring the internet for a solution to this problem, but so far I haven't had any luck. My goal is to design a horizontal line with dots at each end, similar to this example. Does anyone know how I can achieve this using CSS? I atte ...
I'm facing two issues with my webpage. First: I have three buttons on the right side of my page that are supposed to behave like the buttons on this example. However, when you scroll, you can see that their position is incorrectly displayed "outside" ...
this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...
My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...
My coding issue: <div class="col-lg-4"> <label>Expiration ID</label> <div class="row "> <div class="col-lg-5"> <input type="text" class="form-control input-sm" id="TextIDExpire" /> </div> < ...
I have implemented flex from here Whenever the content text increases in size, the div and the price do not remain aligned. See image here. My goal is to achieve the following: Make sure the div maintains the same size whether the content text is long ...
I am looking to refresh the background image of a div using the same URL within a directive. Upon loading my view, I utilized this directive to display the image as a background for the div. app.directive('backImg', function () { var dir ...
My goal is to create a unique overlay effect on images of different sizes within a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will remain consistent, while the images themselves need to dynamically adjust. C ...
Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...
I frequently update this section with a new Jsfidle link to demonstrate the issue when the max-width is set to 300px. For responsive design, adding the "span" tag before radio buttons helps align input content with custom checkbox backgrounds. To see the ...
I created a simple demo featuring a square image with rounded corners to give it a circular appearance. The image rotates slowly, but as it moves diagonally, the horizontal width fluctuates, causing the parent container to resize. I want the parent contain ...
I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed. <div id="wrapper"> ...
I'm struggling to figure out how to overlay a Glyphicon (.glyphicon-zoom-in) on top of a Bootstrap .img-thumbnail. The specific CSS rule I've been using is content:"\e015"; ...
I'm currently in the process of developing a website and I encountered an issue with linking my CSS file, which is stored in a different folder. I originally had it in the same directory as my HTML code, but now I need to figure out how to link it pro ...