Kozea/WeasyPrint

position: absolute and top: 0px has no effect

Closed this issue · 3 comments

This is our html preview
image
And this is the generated pdf
image

This would be the related html code

<td class="material-icon text-block-icon-level-0 position-relative">
    <img class="position-absolute" width="18" height="18" src="xxx/chevron_right.svg" alt="">
    <div class="level-placeholder">
    </div>
</td>

And here the css

.text-block-element-list .text-blocks .text-block .position-relative {
    position: relative;
}

.text-block-element-list .text-blocks .text-block .material-icon .position-absolute {
    position: absolute;
    top: 0;
}

We are using the same css without media queries i guess. Is it possible that position absolute has to be treated differently and is not working or am i doing something wrong?

liZe commented

Here’s an example I tried:

<table>
  <td style="position: relative; background: pink">
    <img src="chevron-right-svgrepo-com.svg" style="position: absolute; top: 0; width: 20px">
    <div style="padding-left: 25px">
      abc<br>
      abc<br>
      abc<br>
      abc<br>
      abc<br>
      abc<br>
    </div>
  </td>
</table>

It gives the correct rendering.

Could you please provide a full example that shows your problem?

liZe commented

Can we do anything to help you?

I think we can close this for now. I worked around it and now it looks fine.