Dom-to-image: Position:Absolute not being proccesed

Created on 8 Aug 2017 · 5Comments · Source: tsayen/dom-to-image

Trying to print a result from JqueryOrgChart

domtoimg

Even better than html2canvas, but position absolute not being interpreted

Source

DanielZambranoC

👍3

Most helpful comment

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;
}

md5-9a6375b00073906f1aa1895fe83ac5c3

shamahoque on 19 Sep 2017

👍7 ❤6 🎉5 🚀1 😄1 👎1

All 5 comments

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;
}

md5-9a6375b00073906f1aa1895fe83ac5c3

shamahoque on 19 Sep 2017

👍7 ❤6 🎉5 🚀1 😄1 👎1

Same issue occuring from my side any one can help ?

narayanachitrakars on 16 Jul 2018

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.