Welcome Guest Search | Active Topics | Sign In | Register

PDF Absolute DIV Position Options
kizel
Posted: Monday, August 27, 2012 3:54:26 PM
Rank: Member
Groups: Member

Joined: 8/27/2012
Posts: 11
Does absolute positioning using inline styles work correctly when converting html to PDF, or is this not fully supported?
eo_support
Posted: Monday, August 27, 2012 4:04:09 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

It is fully supported.

Thanks!
kizel
Posted: Monday, August 27, 2012 4:32:09 PM
Rank: Member
Groups: Member

Joined: 8/27/2012
Posts: 11
Can you tell me why this HTML doesn't seem to work? I am trying to generate 2 pages using page-break-before:always on the second one. They use the same position, but shouldn't the position being used be relative to the page? The second parent div seems to be overlapping the first. Thanks!

<div style="position:relative;">
<div style="position:absolute;left:170;top:20;">Form 1</div>
<div style="width:100%;background:#000000;color:#ffffff;padding:2px 4px 2px 4px;position:absolute;left:0;top:60;">Section A. Administrative</div>
<div style="position:absolute;left:30;top:120;">1)Date of visit:</div>
<div style="position:absolute;left:150;top:120;color:#003399;font-style:italic;">05/19/1984</div>
</div>

<div style="position:relative;page-break-before:always;">
<div style="position:absolute;left:170;top:20;">Form 2</div>
<div style="width:100%;background:#000000;color:#ffffff;padding:2px 4px 2px 4px;position:absolute;left:0;top:60;">Section A. Administrative</div>
<div style="position:absolute;left:30;top:120;">1)Date of visit:</div>
<div style="position:absolute;left:150;top:120;color:#003399;font-style:italic;">12/16/1991</div>
</div>
eo_support
Posted: Monday, August 27, 2012 4:44:28 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
That's how it supposes to work. Elements are positioned based on your document, not based on PDF pages. The HTML to PDF converter produces result exactly as they are rendered on screen by your browser. So if you have a document that runs 3 pages, the 0 Y position will be the top of the first page. Think your HTML output as a long paper, the paging process decides where to "cut" between pages. It does not reposition contents. All contents have already been positioned before paging occurs.

Try to view the HTML in your browser and you will see them overlap too ---- this is the rule --- if they overlap in your browser, then they will overlap in PDF. We cannot reinvent or change HTML layout rules.

Thanks!
kizel
Posted: Monday, August 27, 2012 5:51:53 PM
Rank: Member
Groups: Member

Joined: 8/27/2012
Posts: 11
Thank you. I figured out what is going wrong. It is working how I wanted to, the absolute positioned divs are relative to the parent div, which starts a new page. But I didn't assign the parent div a height, and since absolute position elements are floating, the parent div won't grow to accomodate them. I assigned a height to the parent div and it works correctly now.
eo_support
Posted: Monday, August 27, 2012 8:34:01 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Ah. I see. Thank you very much for the update!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.