Hide Vertical Scrollbar in Chrome while printing - javascript

How can I remove the scrollbar while I print report in Chrome Browser.
Here is my code:
<style>
#media print {
#page {
size: A4 portrait;
margin:1cm;
}
</style>
Here is the picture:

This is the solution I found:
#media print{
#page {
size: A4 portrait;
margin:1cm;
}
::-webkit-scrollbar {
display: none;
}
}

overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla.org/en/docs/Web/CSS/overflow
<style>
#media print{
#page {
size: A4 portrait;
margin:1cm;
overflow: hidden;
}
}
</style>
Or try to set the overflow hidden without depending on the media query:
html { overflow: hidden; }
If this does not help for printing, maybe have a look at the answer of following question: How to hide the scroll bar and with the content ramaining scrollable?
As mentioned there you could try to set the width of the scrollbar to zero for webkit browsers.

Related

Show/Hide a div according to screen size HTML/CSS

Hi I created my first React Project and I want to hide this 'side-menu' section in mobile screens. Is there a way to do this using css?
<div className='side-menu'>
<SiderComponent />
</div>
If you want to hide this div in all the devices that have a max-width of 768px, just use this,
#media (max-width: 768px){
.side-menu {
display: none;
}
}
at the same time if you want to hide a div on large screens (width is larger than 768px), use the below one
#media (min-width: 768px){
.your-class {
display: none;
}
}
You can use media queries like that :
#media screen and (max-width: ...px){
.side_menu{
display: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Printing only contents in dotmatrix Printer

We have been working on a project where the contents in the html page needs to be printed in the dot matrix printer using a JavaScript print function. The issue we are facing is that there is blank space after the contents are printed.
The page settings is A4 / Legal as there cannot be a definite height since the height of the contents printed may vary.
We have tried using the following CSS:
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
##media all {
.page-break {
visibility: hidden;
}
}
##media print {
body * {
display: none;
height: 0;
}
}
You can try adding space between ## and media like so ## media. There is a bug like that with .NET Razor.
You could also use #page to manipulate margins, size and page breaks.
MDN: The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
Or you can also try this
<style type="text/css">
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
</style>
<style type="text/css" media="all">
.page-break {
visibility: hidden;
}
</style>
<style type="text/css" media="print">
body * {
display: none;
height: 0;
}
</style>

Applying display:none in mobile/tablet view in html/css

I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.
Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}
You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}
Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.

Hiding the default scrollbar on an HTML page without using overflow:hidden?

Without using:
<style type="text/css">
body {
overflow:hidden;
}
</style>
How can I hide the scroll bar?
Note - I need overflow for other elements.
This works for webkit:
#element::-webkit-scrollbar {
display: none;
}
If you want all scrollbars hidden, use:
::-webkit-scrollbar {
display: none;
}
For Chrome and Safari browsers, use:
.element::-webkit-scrollbar { width: 0 !important }
There is also a CSS rule that can hide scrollbars in IE 10+.
.element { -ms-overflow-style: none; }
But the overflow:hidden is still most popular.
Have you tried overflow-x and overflow-y?
http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Possible to force printer setup (paper size) in javascript?

I have a need to print pages from a web app on to 8" x 4" index cards. IE doesn't save print settings from one print to the next, so is there a way to programmatically force the print set up?
Look at this CSS3 examples from http://www.w3.org/TR/css3-page/#size:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
/* A4 Landscape*/
#page {
size: A4 landscape;
margin: 10%;
}
You can do this in CSS using the #media print directive, no js required. You'll have to calculate what sizes relate to a 4x8 index card and do all the positioning yourself, but it will work. Also, since this is CSS2 it won't work in IE6. (see Joel's comments)
#media print {
body {
width: /*width of index card*/
height: /*height of index card*/
}
/* etc */
}

Categories

Resources