HTML2CANVAS not work with a scrollable modal - javascript

I don't know how many times had i tried to do this.
In my aplication, I show a huge report in a Modal (Semantic UI) with a option to print that.
The problem is when I print it (using html2canvas then jsPDF) it only shows what is visible in the screen and cuts everything else.
I created a codepen to show my situacion.
there it is
html2canvas(document.getElementById('myModal2'), {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
downloadCanvas(document.getElementById('test'), canvas, 'test.png');
modalButton.click();
});
EDIT 1
I tried change the height of the modal content, in the codepen link will work, but in my aplication won't.
something is blocking the html2canvas from seeing all the modal content, here is what it shows.
the strange part is that when I click to print again, it saves all the modal content (I don't know why).
I tried:
created the canvas twice (somehow they know that the file isn't downloaded yet);
created the PDF twice (but only the second one will be correct) (can I cancell an download?);
change the height in 1px to "fix";
somebody please help me

Related

Issue with loading images from local JSON in ngx-slick carousel - Angular 7

I have a master details component who load a content from a local JSON and change JSON object and Url on buttons click (next/prev) via pipe in Anguar 7. Also I use ngx-slick carousel. On init page loading image isn`t show (you can see just a slider dots like on screenshot below), when go to next page and than on previous one via buttons image show normally. This is only happens when set adaptiveHeight option to true in the carousel setting otherwise everything is great.
But I need that option set to true, because images not have same size.
Slider Issue preview - just show a blue dot
Slick list div preview here - div with slick-list class have a height of 1px in inline style.
After Google / StackOverflow research I found that is might because image loading before slider. I try different ways to solve this but unfortunately with no success. :(
Component Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/work/work-single/work-single.component.ts
Pipe Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/pipes/master-details.pipe.ts
One of site url to see issue:
https://www.markostalma.ninja/selected-work/gizmosphere-infographic
Thanks in advance!
Bug Fixed! This is solution for now.
// Fix slider adaptive height bug on init
slickInit(slideEvent) {
slideEvent.slick.$slider.find('img').first().on('load', () => {
let height = $('.slickImg-item').height();
$('.slick-list').height(height);
console.log("Slider Init");
});

Magnific Popup Conflict

I have a JS conflict occurring and cannot figure it out.
My site is a one page layout that uses smooth scroll to move from section to section.
There are 4 scripts in particular that I believe are conflicting.
The problem is once I click an image to open it, the page bounces right back to the top instead of staying where it is. After closing the image popup, I have to scroll back down every time. You will also notice that after closing the popup image, clicking any nav button at the top forces a scroll from the top down and not from the current position (as shown earlier in the video).
This problem is even worse in Safari (Firefox does not do this part) as the active nav items do not display (green highlight) after closing a popup image.
Please have a look at a video screen grab I posted of the issue I am having.
http://whataprettyface.ca/video2.html
I have the Filterizr / Magnific Popup / Portfolio working perfectly on my mobile site. But the mobile site does not include the smooth scroll feature.
As mentioned above, I am using:
1) Magnific Popup v1.1.0 (Pops open images in forefront)
http://whataprettyface.ca/desktop/js/jquery.magnific-popup.js
2) J.Query Filterizr (arranges selected photo gallery)
http://whataprettyface.ca/desktop/js/jquery.filterizr.js
3) My 'Scripts' main JS (contain smooth scroll code)
http://whataprettyface.ca/desktop/js/scripts.js
4) And a 'portfolio" script:
$(function(){
'use strict';
// portfolio filter container
$('.filtr-container').filterizr('filter', '1');
// portfolio filter
$('.simplefilter li').click(function() {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
// portfolio image-popup
$(".image-popup").magnificPopup({
type: "image",
removalDelay: 300,
mainClass: "mfp-fade"
});
});
I have read about no.Conflict but am not sure how to properly implement it here or if it will even work.
I feel like the answer is before my eyes but I am a novice.
Any help is greatly appreciated!
To my dismay, the issue was not in my scripts at all. It was as simple as changing a few lines in my CSS.
By moving the 'hidden overflow' from the html/body and adding in to the portfolio container, the issue was resolved.
#work .container{
overflow: hidden;
}

Media Scaling on short portrait pages issue with Google Cloud Print

I am writing a program that automatically prints labels for our laboratories with all of the appropriate information. The labels are printed by a Brother QL-710W label printer and the label printing is initiated by Google Cloud Print. When printing to pages that have a greater height than width (i.e. if I am using a small width label tape and printing LANDSCAPE, there are no problems; however, if I try to print in portrait with a shot height, the page scaling has issues. I am posting a picture here to illustrate the problem.
The image at the left (top as displayed) has the appropriate scaling for this print-out, I made the page height the same as the width. For the middle image, I lowered the page height to about 2/3 of the page width and you can see the page content being scaled and the left and right margins being expanded. Finally at the appropriate page height, almost no room is left for the page content.
Note: when I print the page using the browser print dialog, I am able to print the image as expected, though it does have two pages instead of one that can be overcome by selecting only one page to print (see image here).
The Google Clout Print ticket looks like this:
var ticket = {
version: "1.0",
print: {
duplex: {
type: "NO_DUPLEX"
},
copies: {copies: 1},
media_size:{
width_microns:62000,
height_microns:22860
},
page_orientation: {
type: "PORTRAIT"},
margins: {
top_microns:0,
bottom_microns:0,
left_microns:0,
right_microns:0
},
page_range: {
interval:
[{start:1,
end:1}]
}
}
};
The cloud print is initiated by a "Print" button that builds the page content as a blob:
"content" : HtmlService.createHtmlOutput(html).getBlob(),
Ways that I have tried to remedy the situation:
I have made the margins of the print out 0 as seen in the ticket
above.
I have also tried to edit the media and print css:
"#media print{header nav, footer {display: none;}}"+
"#page{margin:0pt !important; padding:0pt !important; size:2.4in 0.9in;}"+
I have tried making the div elements smaller, but as you can see from the affect made by even small changes to the page height (middle image) this has little effect.
Anyone know what I'm missing here?
When you print (successfully) from the browser, the browser converts the content to PDF before sending it to Cloud Print. Since that works, but tries to print a second (blank) page, my guess is that whitespace is creeping in below the content you're interested in.
I suggest you take a good look at the HTML blob, and also consider converting the HTML to PDF. PDF has much higher fidelity for situations like this (view in browser; send to Cloud Print black box; print on a label printer).
Ive been doing countless tests trying to figure out why images are being printed with a border when its set to borderless printing.
This may help.
The same source file was printed, results:
JPG: borderless yes, force raster yes, printed 5mm thick border.
PDF: borderless yes, force raster yes, printed 4mm oversized for paper.
PDF: borderless yes, force raster no, printed 2mm thin boarder.
HTML images seem to be handled like jpg images.
Fit and shrink to paper options dont change the above results.

Bootstrap Modal Changes Size After Hide/Reopen

I'm having a very frustrating issue with a Bootstrap Modal (Bootstrap 2.3.2) that I'm using for a file upload window. It is probably important to note that this is a nested modal, but this is the only instance that I'm having this automatic re-size issue. I have 6 other secondary modals that open from the primary Product Editor modal that are not resizing after they open/close.
Its also worth noting, that on the other modals that are not having this resize issue, they are not being assigned a custom width value.
Here are two images, the first is the first time I open the modal, the second is after it calls modal('hide') and then is opened again with modal('show');
http://i.imgur.com/2cj2k2I.png (first open) http://i.imgur.com/bDIa2mp.png (second open)
This is the creation code:
$('#mediaModal').modal({
show: false,
keyboard: false,
width: '60%',
maxHeight: '600px',
backdrop: 'static'
});
You'll notice in the screenshots that it is sitting over the larger product editor modal. Once an upload is complete, or the cancel button is clicked, (or the upload button is clicked and there are no files to upload), it simple calls:
$('#mediaModal').modal('hide');
On the primary modal, it simply calls $('#mediaModal').modal('show'); each time the 'Upload Media' button is clicked.
To combat this, I have tried to manually adjust the main modal css width before it is shown, like this:
$('#mediaModal').modal().on('show', function() {
$(this).find('.modal').css({
width: '60%'
});
});
This should make sure the primary modal windows width stays at the original definition of 60%. However, it makes no difference. The first time the modal is open, it represents 60% of the screen in width. Any subsequent openings, it has shrunk down in size. It doesn't continue to shrink after the first hide, but neither can I get it to retain the original desired width.
One last note - it is only changing the width, probably because this is a percentage value.
Thanks for any help! I'm really not that good at CSS so I'm guessing you CSS wizards will know whats happening almost immediately! If I haven't provided enough information please just leave a message and I'll add to this post.
(Note: Upgrading to BS 3 is just not an option, the code base would take weeks to clean up)

Modal - content is getting out of modal on smaller monitors?

I've downloaded a free modal plugin called blockUI, and used it as my image uploading modal.
So far i've designed, positioned everything, but I have one problem:
When I make my browser screen smaller, OR go on iphone, or go on my other screen, some content gets out of the modal
See example here:
(source: gyazo.com)
See LIVE example of the website to test on your screen:
https://argonite.net/img/
Why is this happening? I have set min-width, the modal should automatically resize the background and let the content in.
Information:
.file_bg Each file will be stored in file_bg, it's like a block that will hold image preview, progress bar, and more.
#button_start - the progress bar
#button_remove - #button_link - Remove / Copy to clipboard icons
CSS File:
http://pastebin.com/QwF4Vj3B
JS file:
http://pastebin.com/xWt6bC32
Why is it doing that?
for div.blockUI blockMsg blockPage change min-width:35%; to width:35% and add min-width with a fixed pixel value (520px seems to be good in your case). That should do the trick. For mobile, you can use #media queries to apply different values for width and min-width.
div.blockUI blockMsg blockPage {
width:35%;
min-width:520px;}

Categories