Positioning – bottom ignored

#26614

Hi,

I am having an issue regarding positioning of 2 div elements.

<br /> <div style="height: 100px; width: 100; display: block; position: relative; background: blue; "><br /> <div style="height: 50px; width: 50px; bottom: 0px; left: 20px; position: absolute; background-color: green;"><br /> </div><br /> </div><br />

This code will in a browser show a blue box of 100×100 that contains a green box (50×50). The green box is placed at the bottom line off the blue box.

However, when I generate the pdf, the “bottom: 0px” is ignored, and the blue box is at the top.
The “left: 20px” is not ignored.

I hope someone can give me a hint how to solve this issue.

(I am using the newest version (trial))

Best regards
Mads Wermelin

#28687

Currently PD4ML supports only “left” and “top” CSS properties. See: http://pd4ml.com/css.htm

We could add the missing properties support in one of the forthcoming releases.

#28688

I am also looking forward for getting positioning support.
I have an urgent requirement of using this and pd4ml seemed to be most suitable for my html pages. but i am getting the same issue its not able to handle relative and absolute position combo. on just absolute its working fine…

Any expected time line by which it is expected to be done??

#28689

I add my “want” vote as well. Please! 🙂
In my case it’s “right:” that we’re sorely missing.

#28690

Viktor,

we’ve just added CSS “right” and “bottom” properties support, however I am afraid they are still not 100% identically interpreted by PD4ML, comparing to the major web browsers.

Could you please create and send us an HTML document, with your most wanted currently unsupported CSS features we could use for our internal tests?

(including html-css-to-pdf-rendering-issues-f3/absolute-positioning-within-a-padded-parent-t524.html test case)

#28691

@PD4ML wrote:

Viktor,
Could you please create and send us an HTML document, with your most wanted currently unsupported CSS features we could use for our internal tests?
(including html-css-to-pdf-rendering-issues-f3/absolute-positioning-within-a-padded-parent-t524.html test case)

Hello – thank for your reply.
Our currently most wanted properties are those 2 remaining positioning directions – bottom and right, and the already referenced “padding in absolute positioning parent” issue.
I have created another test case that tests both these issues:
http://www.vergangen.de/permatemp/pd4mlreport/pd4mltest_positioning.html
It needed a bit of overhead for MSIE, but in the end it shows the same in all browsers and, ideally, it should show the same in PD4ML. Testing in the GUI of the last version, all the violet boxes show overlapping at one position, while they should be occupying the respective corners of the parent box.

Kind regards,
Viktor

#28692

We have just upgraded our version of PD4ML specifically for the positioning fixes, unfortunately they don’t quite work.

If you have div within a div, and the inner div is “position:absolute; bottom:0”, then it works fine.

The problem is when you have a div with two absolute positioned divs within, or a div with an absolute positioned div and an image inside.

Example 1:
<style type="text/css"><br /> #container {float:left; width:800px; height:600px; position:relative; background:#ccc}<br /> #innerTop {float:left; width:100px; height:200px; position:absolute; top:0; background:#00cc00; display:none}<br /> #innerBottom {float:left; width:800px; height:200px; position:absolute; bottom:0; background:#cc0000}<br /> </style><br /> <br /> <div id="container"><br /> <div id="innerTop"><br /> this is absolute top<br /> </div><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div>

Example 2:
<style type="text/css"><br /> #container {float:left; width:800px; height:600px; position:relative; background:#ccc}<br /> #innerBottom {float:left; width:800px; height:200px; position:absolute; bottom:0; background:#cc0000}<br /> </style><br /> <br /> <div id="container"><br /> <img src="someimage.jpg" style="width:800px; height:600px" /><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div>

Unfortunately we have a very urgent requirement to show text boxes overlayed on images, if anyone has any work around or ideas please post them.

#28693

The examples do not work as they combine positioning and float behavior. The combination is not supported by PD4ML.

#28694

Having done a bit more testing it seems that the problem is now occurring even when trying to use “positioning:absolute; top:0”. I’m pretty sure that in our earlier version of PD4ML the top alignment option worked ok.

What happens is that the absolute positioned element isn’t actually being absolutely positioned over other relative elements.

Example (#innerTop div appears below the image instead of over):
<style type="text/css"><br /> #container {float:left; width:800px; height:600px; position:relative; background:#ccc}<br /> #innerTop {float:left; width:100px; height:200px; position:absolute; top:0; background:#00cc00; }<br /> </style><br /> <br /> <div id="container"><br /> <img src="imagehere.jpg" style="width:700px; height:600px" /><br /> <div id="innerTop"><br /> this is absolute top<br /> </div><br /> </div>

#28695

Do you have any reasons not to remove “float: left;” from the style?

#28696

@PD4ML wrote:

The examples do not work as they combine positioning and float behavior. The combination is not supported by PD4ML.

Ah sorry only just saw this, I’ve done some initial tests removing the float and so far so good thanks.

#28697

After further testing I’ve hit another problem that I can’t seem to resolve. For some reason the absolute positioning is effected by the page margin settings.

For instance if I have 5 pages each with an overlayed div which is absolutely positioned to bottom:0, for each page the absolutely positioned div moves up the page by around the same amount that the PDF margin is.

Example code:

<div id="container"><br /> <img src="./horiz-report_files/image1-h640.jpg" style="width:1000px; height:640px" /><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div><br /> <br /> <div id="container"><br /> <img src="./horiz-report_files/image1-h640.jpg" style="width:1000px; height:640px" /><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div><br /> <br /> <div id="container"><br /> <img src="./horiz-report_files/image1-h640.jpg" style="width:1000px; height:640px" /><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div><br /> <br /> <div id="container"><br /> <img src="./horiz-report_files/image1-h640.jpg" style="width:1000px; height:640px" /><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div><br /> <br /> <div id="container"><br /> <img src="./horiz-report_files/image1-h640.jpg" style="width:1000px; height:640px" /><br /> <div id="innerBottom"><br /> this is absolute bottom<br /> </div><br /> </div>

Any idea if I’m able to get it bottom aligned to the containing DIV for each slide?

[Author]

Posts