Prevent to print white empty sheets while printing pdf of a webpage - javascript

I used #media query to override css properties of my webpage and create a good-for-me print layout.
But I have a problem: even if what I want to print "stays" entirely inside a single A4 sheet, if I click "print" (no matter if print pdf or normal paper print) it's printed also a white and empty additional sheet.
How to prevent this?
My code:
#media print {
.noPrint{
display: none;
}
section{
display:block;
background-color: white;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin:0;
padding: 1em;
/*settings */
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
}
a{
display:none;
}
button{
display:none;
}
h1{
font-size: 3vw;
}
}

You could use :
page-break-after: auto;
or :
#media print {
html, body {
height: 99%;
}
}
as mentioned in how to avoid extra blank page at end while printing?
But since I haven't worked with print all that much I can't help anymore than this.

Related

Why does my HTML table become half it's size when I add 'display: block;' to it's CSS?

CSS:
.TFtable{
width:100%;
border-collapse:collapse;
overflow-y: scroll;
height: 500px;
display: block;
}
.TFtable td{
padding:7px;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr{
background: #242526;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd){
background: #242526;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even){
background: #343434;
}
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
Please note that my table is inside a container--wrap, which is inside another container--wrap.
My table, inside the container wrap, halfs itself on a desktop screen and there is just a black space on the right of it.
What's happening?
HTML
<div class="container--wrap">
<table class="TFtable">
...
</table>
</div>
However, when I remove the display: block;, the height:500px; and overflow-y: scroll does nothing.
What's wrong here?
Also: how can I check whether the user is using a mobile screen or not, and make it so the font in the table is smaller if they are?
Try adding a 100% width property in each container:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
width: 100%;
}
About the mobile screen, you need to use media queries. It's a long topic, so I let you a link to some documentation about it:
https://developer.mozilla.org/es/docs/CSS/Media_queries

Can't click on browser vertical scrollbar because of a fullscreen fixed bootstrap modal

I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you
In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal

Is there a CSS approach to make dynamic data driven characters fit inside div button?

I am editing a data-driven website that uses data from an automation database engine. Inside the HTML, I have a fixed size button and within that are texts that come from the database. I want to add some css styles that would resize the font so that it always fits inside the div button.
Here is my code:
CSS:
.button {
width: 216px;
height: 44px;
background-color: 00baf2;
color: #fff;
border-radius: 5px;
font-size: 23px;
line-height: 45px;
font-weight: 500;
text-align: center;
#media screen and (max-width : 768px) {
.button {
width: 400px;
height: 81px;
font-size: 30px;
line-height: 40px;
background-size: 400px 81px !important;
float: none !important;
clear: both;
margin: 25px auto;
}
HTML
<div class="button">View Your Plan</div> (static/not data-driven)
<div class="button">Current Members Click Here</div> (data-driven)
<div class="button">Enroll Now</div> (static/not data-driven)
The second/middle button is a data driven button. Sometimes, the words will be longer than "Current Members Click Here". Sometimes, it will be "See Your Plan Discount Program Here". The problem is if take out the font-size and line-height, it will default the font-size, which makes it small. How do I fix this so that the dynamic text will always fit inside the div button whether it is short or long? Can it be done with just CSS or is there a JS solution?
Here is what it looks like now:
Desktop View
Mobile View
Goal:
Desktop
Mobile
EDIT:
I just read a comment that you want that data-driven button to have a smaller font than the others. Just specify it in the class I used for that button, setting a smaller vw in your font-size.
This is possible using VW units, you will need to support older browsers with a fallback though. I don't know if this breaks in larger desktops but hopefully you can get an idea of this approach.
.button {
width: 216px;
min-height: 44px;
background-color: #00baf2;
color: #fff;
border-radius: 5px;
font-size: 23px;
font-size: 2vw;
font-weight: 500;
text-align: center;
line-height: 44px;
}
.button.data-driven {
line-height: 22px;
}
#media (max-width: 992px) and (min-width: 768px) {
.button {
font-size: 23px;
font-size: 2vw;
}
.button.data-driven {
line-height: initial;
}
}
#media screen and (max-width: 768px) {
.button {
width: 400px;
height: 81px;
font-size: 30px;
line-height: 81px;
background-size: 400px 81px !important;
float: none !important;
clear: both;
margin: 25px auto;
padding-top: 0;
}
.button.data-driven {
line-height: 81px;
}
}
<div class="button">View Your Plan</div>(static/not data-driven)
<div class="button data-driven">Current Members Click Here</div>(data-driven)
<div class="button">Enroll Now</div>(static/not data-driven)
What you're after is a dynamic font size that scales to fit, and you can't do that with just CSS. You can apply different classes conditionally which could affect the font size. For instance:
.button.small-text {
font-size:12px;
}
.button.medium-text {
font-size:18px;
}
.button.large-text {
font-size:23px;
}
You would need to redefine these in your media queries to fit the different button widths.
Then you have to either use backend or frontend script to apply small-text, medium-text or large-text.
With jQuery this might look like:
$('.button').removeClass('small-text medium-text large-text');
$('.button').each(function() {
var len = $(this).text().length;
if (len < 20) {
$(this).addClass('large-text');
} else if (len < 40) {
$(this).addClass('medium-text');
} else {
$(this).addClass('small-text');
}
});
All you have to do is to remove the height to the button to make it dynamic. So the button will grow as the text increases. and do add a display:inline-block to the button class.
If you need to make the button with fixed/constant height, use a % value in the font-size of the button.
like font-size:10%; as % denotes a relative value, you could use that.

css #print media showing spaces for hidden contents angularJS

I have an angular SPA. Main page is divided into 2 parts - left and right (both have separate scrolls). Left portion have links and right portion displays data for those links.
This is main CSS.
#left, #right {
overflow-y: scroll
}
#left {
margin-top: 75px;
margin-left: 5%;
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 75%;
}
#right {
margin-top: 75px;
margin-left: 5%;
position: absolute;
left: 25%;
top: 0;
float: right;
width: 70%;
height: 75%
}
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#printSection {
visibility:hidden;
}
Right portion contains a div - #printSection, and a button print. I want to print data of #printSection while user clicks on print button. print css is -
body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
Every thing is fine except clicking on print button showing empty pages for left section data first then the #printSection data.
Why this empty pages are coming for left section data?? Please help me. If you need any more inputs please let me know.
visibility: hidden
Keeps your elements in the document flow, and just hides any content. This is the cause of your problem.
display: none
Removes the elements from the document flow completely.
Angular way you can achieve this instead of CSS
If you don't want to store element in DOM(in your case) use ng-if like
in controller:
$scope.showdivVar=true;
View:
<div ng-if="showdivVar"></div>

how to set width auto for all childrens of div while printing using jquery or css

I used fluid layout in html page.while printing i am facing problems with width and the content is not showing fully in input and text areas.when i set width as auto for table the cells alignment is missing. how can I solve this problem
#media print {
body {
background-color: white;
font-size: 12pt;
width: 100%;
margin: 0%;
padding: 0;
}
#target {
display:none;
}
#printDiv {
display: block !important;
width: auto;
}
}
Thanks in advance

Categories

Resources