Position:Absolute not being proccesed

[DanielZambranoC]

Trying to print a result from JqueryOrgChart

Even better than html2canvas, but position absolute not being interpreted

[shamahoque]

I ran into a similar problem with the position:absolute elements not being rendered accurately in the image.

Explicitly declaring position:relative on the outer/parent element solved the problem for me.

Example:

.outer {
    position: relative;
}
.inner {
    position: absolute;
}

<div class="outer">
  <div class="inner">...</div>
  <div class="inner">...</div>
</div>

[narayanachitrakars]

Same issue occuring from my side any one can help ?

[lawsumisu]

Under the hood, this library uses window.getComputedStyle() to set the style of the DOM Element you are converting. I believe the issue is that when you set position: absolute, window.getComputedStyle() will also set left, right, bottom, top to have pixel values based on where the element would be positioned by default. This can cause your image to basically be rendered "off screen" if the pixel values are too off. You can overwrite this style via the options param by doing (as an example):

options.style = {
  left: '0',
  right: '0',
  bottom: '0',
  top: '0'
}

I had a similar problem, and those are the settings I used to fix it, but if those don't work, I would consider doing calling getComputedStyle() on your element to see what the positioning is, and from there figure out what they should be, and then use options.style to overwrite them to get a nice image.

[terry623]

@shamahoque Thanks for your answer It works for me!

[stellarsailor]

@shamahoque Thank you so much!!!

[benpinchas]

For me the problem was that the children were positioned absolute and we placed them on the relative parent with trasnfrom: translate(100px, 100px)

So I had to iterate over these child and replace for example: trasnfrom: translate(100px, 100px) to: left: 100px top: 100px

This fixed my issue