I am trying to print the page body, but the vertical "navbar" still shows up and covers a part of it.
This is the code i am using to hide the navbar on print:
##media print and (min-width: 800px){
#print {
display: none;
}
}
This is the navbar loaded on _Layout.cshtml, as a partial view:
<partial name="_MenuSidebarVerticalPartial" id="print" />
You could use the class .d-print-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 have a website that my client needs to set the cart menu item visible beside the menu button when is on mobile device but I don't know what is the better way to do this. Does anyone of you have any tips ? I appreciate in advance. Bellow is an image of the item highlighted in yellow that I want to set visible :
Have a closer look at Bootstrap's Responsive Utilities documentation. You can use the hidden- or visible- classes.
To hide on desktops add the following classes to your element:
hidden-md hidden-lg
To hide on mobile use:
hidden-xs hidden-sm
Here's a jsFiddle demo.
By adding following class you can hide it in big screen and show in mobile.
col-visible-xs col-visible-sm col-hidden-md col-hidden-lg
For hidding in big screen use following class
col-hidden-md col-hidden-lg
Showing in small screen use following class
col-visible-xs col-visible-sm
You could search something for this in jquery and showing and hiding blocks. a very simple way would be to use media queries in CSS. It isn't the best solution but it is the easiest one.
#media screen and (min-width: 768px) {
.shopping-cart {
display: none;
}
}
#media screen and (max-width: 768px) {
.shopping-cart {
display: block
}
}
I have requirement to print html page in A4 dimension, plus I want to print content body print along with css, html and ignore menu list, header, footer and page right-side menu list.
To start with this, I have introduce simple div and class noprint and add this in #media print but its seems not working. noprint class works outside the #media print so I know its correct.
Also my requirement is to print directly from browser using standard Ctrl+P keyboard option
<style type="text/css">
.standardStyle {
display:block;
width:200px;
height:150px;
padding:10px;
background-color:green;
margin:5px;
}
#media print{
.noprint{ color:red;}
}
</style>
</head>
<body>
<div class="noprint standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
Run the snippet and hit Ctrl+P , you will see the line in red colour.
Screenshot :
#media print {
.noprint { color:red; }
}
<div class="noprint">
this is test line.....
</div>
Most browsers do NOT print background colors and background images by default. I suppose you are missing the green background - this is the reason for it.
Usually this can be acitvated in the browser's print dialog, but to force a background to be printed you can only try adding !important to the settings that don't appear properly in print.
#media print
{
.noprint{
display: none !important;
}
}
I have 2 div tags in my html code.and I have 1 print button on the top of the page.when I click on the print button , it is giving me everything in the print what I have on html page(means content from both the divs). I want to restrict this print button's functionality till 1st div only and I will add another print button before next div to print that div content independently. Is there any way I can do this?
<html>
<body>
<input type="button" value="Print" class="noprint" onclick="window.print();return false;">
<div>
...
//my content.Want to print only this div when I will click print button.
...
</div>
//I will add another print button here which will allow me to print the next div.
<div>
...
//my content
...
</div>
</body>
</html>
#media print {
*
{
display: none !important;
}
.printable
{
display: block !important;
}
}
Then add the printable class to your div you want to print.
try this
$(document).on('click','#pring1',function(e){
$('#printCSS').remove();
$('head').append('<link href="stylesheetForBox01.css" media="print" id="printCSS">');
});
$(document).on('click','#pring2',function(e){
$('#printCSS').remove();
$('head').append('<link href="stylesheetForBox02.css" media="print" id="printCSS">');
});
in stylesheetForBox01.css page
#box1{
display: none;
}
in stylesheetForBox02.css page
#box2{
display: none;
}
I would recommend using media queries for this one, like such:
#media print {
.div1 {display:block;}
.div2 {display:none;}
}
This will effectively hide div2 (you need to name your elements), while retaining div1.
See http://jsfiddle.net/576ttew8/ for an example.
Furthermore, you can use #media print to further style your div so that it renders better in the printable form.
For more information on #media print (and other media queries), see http://www.w3schools.com/css/css_mediatypes.asp
I have a page with multiple scrolling slides inside a pane. Whenever I try to print the second slide, it always prints the first one which is loaded when user first visit the site. Is there any print function in Javascript or JQuery, which allows me to print slides which wasn't loaded first or even the contents that is visible to the user?
Have you looked at #media print { } and #media screen { } in CSS?
The first will be implemented when printing, the 2nd will be implemented on screen.
Purely as an example...
#media print {
#myDiv { overflow : auto; }
}
#media screen {
#myDiv { overflow : scroll; }
}