Im working on a project for a family friend and I have run into an issue while printing a table it tunicates all the data but one page. This seems to be the case in all the browsers that i have tried (Chrome, Firefox, Safari) The Table is set up in a div (table-stuff in the example code) that has the overflow set to auto then the print css sets the overflow to visible (This is what i have found to do when searching for the problem) and hides all the other elements with a no-print class. Its set up as the following
<main>
<div class='grid'>
<div class='contents'>
<div class='table-stuff>
<table> Lots of data in table</table>
</div>
</div>
</div>
</main>
Print CSS:
.no-print {
display: none !important;
}
.table-stuff {
overflow: visible !important;
float: none !important;
}
Any help would be appreciated and if any other info is needed I'd be happy to provide. Thank You in advance
So I was able to get it to print correctly and it was because of google material design lite causing the issue. I still am trying to find what style was causing the issue though.
Try creating a #media in your css file. I would do something similar like this:
#media print {
table.no-print {
display: none;
}
}
Related
I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.
But this basic code prints even the hidden blocks.
<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>
Could someone help me please!
Here The button generates this pdf with above code.
but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones.
It is printing all the body including hidden blocks.
like in this below screen shot, this are normally hidden blocks for computer browsers.
I solve this problem by including some #media print rules in a stylesheet.
.print-only{
display: none;
}
.screen-only{
display:block;
}
#media print {
.print-only{
display: block;
}
.screen-only{
display:none;
}
.something1,
.something2 {
display:none;
}
}
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
I'm working on a Classifieds/Ads Page for a client using content from a specific Database. I'm close to get the look I'm looking for but now I have a problem. I don't want CSS Styles for the empty boxes to the available spaces.I just want the CSS Styles on the ones that will appear once the information arrive to the database and it's ready to show on the Classifieds/Ads page.
Is there a way to have a CSS style that only is applied when content is present?
This is my test page.
notice how I kind of cheated the CSS style so the blank boxes (spaces) show a text saying: "place your ad here!" but I really don't want those blank boxes there. Any help will be apreciate!
thanks in advance.
All you need to do is to find the parent div which does not have content on its header (for instance) using jQuery. Then you can set its display property to none. I have created a working example ****HERE****
HTML:
class="ad">
<h2>This is an ad</h2>
<p>this is the ad which has been added by the database</p>
</div>
<div class="ad">
<h2></h2>
<p></p>
</div>
CSS:
* {box-sizing: border-box;}
h2, p {margin:0; padding:0;}
.ad {
display: block;
float: left;
height:300px;
width:130px;
background: #999;
margin: 10px 20px;
padding: 5px;
}
jQuery:
$(".ad").each(function() {
if ($(this).find("h2").text() == "") {
$(this).css("display","none");
};
})
This seems more of a backend issue than a CSS one. Your php script shouldn't be outputting html for ads that don't exist.
As far as I understand in HTML5, you should only have one header tag and one footer tag in a document (or at least in a section). But what if you want one footer to appear on screen and a different one to appear when printing. As far as the HTML is concerned, you are adding two footers together, even though only one would appear at a time.
Would screen readers, for example, ignore the print version?
One way of doing this is to put two sections in each, one to be displayed on screen (.noprint) and the other to be displayed for print (.print). Display .noprint as you would and set .print to display none except for when being printed using an '#media print' query.
like this:
<header>
<div class="noprint">
<p>stuff for screen only goes here</p>
</div>
<div class="print">
<p>stuff for print only goes here</p>
</div>
</header>
<style>
.print {
display: none;
}
#media print {
.print {
display: inherit;
}
.noprint {
display: none;
}
}
</style>
Also, to answer your question about screen readers: they usually will not read an element set to display:none and I believe that to be true in this case. Here's a more comprehensive guide on how screen readers deal with display:none:
http://juicystudio.com/article/screen-readers-display-none.php
good luck!
I have a web page that loads two images from a css sprite like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="arrow low"></div>
<div class="arrow high"></div>
</body>
</html>
and the css (stylesheet.css) looks like this:
.arrow
{
height: 239px;
width: 260px;
background: url('logotypearrows.png') no-repeat;
}
.arrow.high
{
background-position: 10px 0px;
}
.arrow.low
{
background-position: -1003px 0px;
}
The web page looks perfect but I can't print it. I can't see the dynamically loaded arrows. Anyone that knows how to solve this problem? I want to be able to print out the arrows and I want to load them from a css sprite.
By default browsers do not print background-images, this can be changed by user.
Maybe you should add some content inside div <div class="arrow low"><span class="print-only">*</span></div> and make it visible only for print version of your page with #media print.
Quick fix:
You can have a custom css class for media type print like this,
#media print {
.printable {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
And add this class to your divs,
<div class="arrow high printable"></div>
This will print your background images in Chrome, Firefox and Safari.
Note: These css options are non-standard - so, quite risky to use these in production. Also, this won't work in Internet Explorer - you need to enable the option "Print background images" from File --> Page Setup.
Cross-browser fix:
Instead of using divs with css image sprites as background, you can use actual images with the same logic you have applied in your classes. For an example, you can check my JsFiddle here
In which image you have to print?
It's up to the user and their browser settings to print or not print
background images. To keep yourself from relying on that, put the
images in the foreground in HTML. —Kon
(taken from this related thread)