You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<div id="zone">
<div>
<hr style="margin-top: 1em">
<h3>Here’s the thing:</h3>
<p>This part will be clipped!</p>
</div>
</div>
<button onclick="htmlToImage.toCanvas(document.getElementById('zone')).then((canvas) => document.body.appendChild(canvas));">To image</button>
The paragraph should be part of the generated image
Current Behavior
The paragraph is clipped, because of the margin-top on the hr, which shifts the whole image down.
Possible Solution
I haven't found a good solution, so I'm scouring the tree for any margin-top and if there is one, I add a div at the bottom of the element with a mix-height of 0.1px.
Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
Expected Behavior
The paragraph should be part of the generated image
Current Behavior
The paragraph is clipped, because of the margin-top on the hr, which shifts the whole image down.
Possible Solution
I haven't found a good solution, so I'm scouring the tree for any margin-top and if there is one, I add a div at the bottom of the element with a mix-height of 0.1px.
Steps To Reproduce
See above.
Additional Context
here's the result I'm seeing:
Your Environment
The text was updated successfully, but these errors were encountered: