Fix rendering of offscreen elements #1083
Conversation
eKoopmans
force-pushed
the
bugfix/offscreen-rendering
branch
from
251b3bf
to
62b6973
Compare
|
@eKoopmans Hi. I tryed your fix but im not able to make this work. I have this: http://i.imgur.com/EE8GyHD.png Green: Popup when I click print button on Gantt chart. Is a gantt chart rendered by JQuery.gantt, any help to fix this? Thanks!! |
|
Sure @Romerski, I'll take a look. Can you give me a link to your page where you're generating the canvas, or a similar demo? |
|
@eKoopmans Sure! I've sent you an email to erik@erik-koopmans.com. Thanks again! |
|
@Romerski, I've had a look. The problem is that your element is designed to be exactly the width of its container - so setting That said, here's my fix for your specific case:
That should give your element the right width, so that when you convert to canvas it will display correctly. |
|
Thank you for your reply and your fix! I'll try as soon as I can and I'll give you a response.
Thanks again!!
2017-04-01 20:59 GMT+02:00 Erik Koopmans <notifications@github.com<mailto:notifications@github.com>>:
@Romerski<https://github.com/Romerski>, I've had a look. The problem is that your element is designed to be exactly the width of its container - so setting overflow: visible on the container doesn't solve the problem (which it normally would) because the element isn't any larger than the container.
Here's my fix for your specific case:
1. Before you use html2canvas on your element mod_pf_gantt_244, set the width of its parent (in your case the body of the new window you create) to an arbitrarily large width, something bigger than your element could possibly be:
var el = document.getElementById('mod_pf_gantt_244');
el.parentElement.style.width = '10000px';
2. Then, to prevent your element from filling the entire width we just set, change the element's display style to inline-block (and make sure width is set to auto):
el.style.display = 'inline-block';
el.style.width = 'auto';
That should give your element the right width, so that when you convert to canvas it will display correctly.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#1083 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ALqhhPceglmg_VhcGAiUkqdswAS7eEs4ks5rrp6FgaJpZM4MpnBu>.
|
|
I've just tried and is working like a charm! Thanks again, my problem is fixed now.
I owe you one!
2017-04-03 8:36 GMT+02:00 Yeray Romero <yerayrome@outlook.com<mailto:yerayrome@outlook.com>>:
Thank you for your reply and your fix! I'll try as soon as I can and I'll give you a response.
Thanks again!!
2017-04-01 20:59 GMT+02:00 Erik Koopmans <notifications@github.com<mailto:notifications@github.com>>:
@Romerski<https://github.com/Romerski>, I've had a look. The problem is that your element is designed to be exactly the width of its container - so setting overflow: visible on the container doesn't solve the problem (which it normally would) because the element isn't any larger than the container.
Here's my fix for your specific case:
1. Before you use html2canvas on your element mod_pf_gantt_244, set the width of its parent (in your case the body of the new window you create) to an arbitrarily large width, something bigger than your element could possibly be:
var el = document.getElementById('mod_pf_gantt_244');
el.parentElement.style.width = '10000px';
2. Then, to prevent your element from filling the entire width we just set, change the element's display style to inline-block (and make sure width is set to auto):
el.style.display = 'inline-block';
el.style.width = 'auto';
That should give your element the right width, so that when you convert to canvas it will display correctly.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#1083 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ALqhhPceglmg_VhcGAiUkqdswAS7eEs4ks5rrp6FgaJpZM4MpnBu>.
|
|
You're welcome @Romerski, glad it works! |
|
@eKoopmans thanks, I need the feature and it works for me. |
|
@eKoopmans Any reason as to why this has not been reviewed / accepted yet? |
|
Hi, I am trying to apply a proper print but I am having an issue with the function when called by onclick. Please see my demonstration: link to project. Any help would be deeply appreciated. |
|
@PieterJanVdb the repo owner is doing a big overhaul on html2canvas, I think the new build will have this issue (and many others) resolved. I'm also not sure my solution is perfect... @Darkmift I've taken a look, and I have to admit I'm confused! I can tell you the different results you're getting are due to your scroll position - so where you say you have to restart the browser, that's not necessary, it's just where you're scrolled to on the screen. But regarding how to fix it... I'm still trying to figure it out! |
|
Has this been fixed in the latest version? |
niklasvh
force-pushed
the
master
branch
3 times, most recently
from
932773c
to
1584357
Compare
|
@idolizesc good question! In my testing... yes!! It's fixed! As of v1.0.0-a1, I believe this issue is resolved, in both foreignObjectRendering and regular rendering. Thanks @niklasvh! I'll close this PR - if anyone has any continued problems with offscreen rendering, please post again here. |
|
when data is too large html2canvas isnt printing the whole data it creates a space after printing certain amount of data else it will be blank page, |
|
@ShrutiA11 I had the same problem. I fixed it passing the option scrollY:-window.scrollY |
Bug: Off-screen rendering
Off-screen components are currently not being rendered.
Fix
When the
type: 'view'option is not set, the width of the renderer is set to therightandbottombounds of the root node, rather than the document width/height.Related issues/pull requests
#117, #461, #590, #622, #774, #836, #837, #876