
		PDF Generating Tool Support Forum
		HOME Login Register Search

Subject: CSS div positioning bug

marcosurata

Posted: 12 Apr 2010, 18:26

Hello,

I am doing some test with absolute positioning inside relative divs. Something like this

<div id="outer" style="position:relative; height: 100px;" >
outer div 1
<div id="inner-1" style="position:absolute; top:0; left:0"> inner-1 <img src="test.jpg"> </div>
<div id="inner-2" style="position:absolute; top:0; left:0"> inner-2 </div>
</div>

<div id="outer" style="position:relative; height: 100px;">
outer div 2
<div id="inner-1" style="position:absolute; top:0; left:0"> inner-1 <img src="test.jpg"> </div>
<div id="inner-2" style="position:absolute; top:0; left:0"> inner-2 </div>
</div>

On the HTML each div is rendered one after the other and the inner divs are displayed INSIDE their outer divs.

Here is the sample html source code that I am trying to render with pd4ml.
[img]c:/pd4ml.jpg[/img]

Code:

<html>
<head>
    <style type="text/css">
      h2 {
       page-break-after: always;
     }
    </style>
     <jsp:include page="../../includes/head.jsp" />
</head>
<body>
<center>
    <div style=" background-color: aqua; width:100px; border-color: black; height:150px; border-width: 3px; border-style: solid;" >
        <div style="background-color: green; ">CONTRACHEQUE 1</div>
        <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
            <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;">
                div absolute da imagem
            </div>
            <div style="background-color: BLUE; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;">
                  <div id="destinatario" class="destinatario" >
                      <p class="textoVerso">MARCOS URATA</p>
                      <p class="textoVerso">ENDERECO</p>
                  </div>
            </div>
        </div>
    </div>
    <h2>&nbsp;</h2>
    <div style=" margin-top:5px; background-color: black; width:100px; height:150px; border-color: green; border-width: 3px; border-style: solid;">
        <div style="background-color: yellow; ">CONTRACHEQUE 2</div>
        <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
            <div style=" position: absolute; left: 0; top: 0;  border-color: maroon;  border-width: 3px; border-style: solid;">
                div absolute da imagem
            </div>
            <div style="background-color: yellow; position: absolute; left: 0; top: 0;border-color: yellow; border-width: 3px; border-style: solid;">
                  <div id="destinatario" class="destinatario" >
                      <p class="textoVerso">MARCOS URATA</p>
                      <p class="textoVerso">ENDERECO</p>
                  </div>
            </div>
        </div>
    </div>
    <h2>&nbsp;</h2>
    <div style="margin-top:5px; background-color: lime;  width:100px; height:150px; border-color:fuchsia; border-width: 3px; border-style: solid;">
        <div style="background-color: silver; ">CONTRACHEQUE 3</div>
        <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
            <div style=" position: absolute; left: 0; top: 0;  border-color: maroon;  border-width: 3px; border-style: solid;">
              div absolute da imagem
            </div>
            <div style="background-color: silver; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;">
                  <div id="destinatario" class="destinatario" >
                      <p class="textoVerso">MARCOS URATA</p>
                      <p class="textoVerso">ENDERECO</p>
                  </div>
            </div>
        </div>
    </div>
  </center>
</body>

</html>

And the resulting pdf generated by pd4ml:

[Quote]

Subject: Re: CSS div positioning bug

marcosurata

Posted: 12 Apr 2010, 18:37

Code:

<html>
<head>
    <style type="text/css">
      h2 {
       page-break-after: always;
     }
    </style>
     <jsp:include page="../../includes/head.jsp" />
</head>
<body>
<center>
    <div style=" background-color: aqua; width:100px; border-color: black; height:150px; border-width: 3px; border-style: solid;" >
        <div style="background-color: green; ">CONTRACHEQUE 1</div>
        <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
            <div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;">
                div absolute da imagem
            </div>
            <div style="background-color: BLUE; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;">
                  <div id="destinatario" class="destinatario" >
                      <p class="textoVerso">MARCOS URATA</p>
                      <p class="textoVerso">ENDERECO</p>
                  </div>
            </div>
        </div>
    </div>
    <h2>&nbsp;</h2>
    <div style=" margin-top:5px; background-color: black; width:100px; height:150px; border-color: green; border-width: 3px; border-style: solid;">
        <div style="background-color: yellow; ">CONTRACHEQUE 2</div>
        <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
            <div style=" position: absolute; left: 0; top: 0;  border-color: maroon;  border-width: 3px; border-style: solid;">
                div absolute da imagem
            </div>
            <div style="background-color: yellow; position: absolute; left: 0; top: 0;border-color: yellow; border-width: 3px; border-style: solid;">
                  <div id="destinatario" class="destinatario" >
                      <p class="textoVerso">MARCOS URATA</p>
                      <p class="textoVerso">ENDERECO</p>
                  </div>
            </div>
        </div>
    </div>
    <h2>&nbsp;</h2>
    <div style="margin-top:5px; background-color: lime;  width:100px; height:150px; border-color:fuchsia; border-width: 3px; border-style: solid;">
        <div style="background-color: silver; ">CONTRACHEQUE 3</div>
        <div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
            <div style=" position: absolute; left: 0; top: 0;  border-color: maroon;  border-width: 3px; border-style: solid;">
              div absolute da imagem
            </div>
            <div style="background-color: silver; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;">
                  <div id="destinatario" class="destinatario" >
                      <p class="textoVerso">MARCOS URATA</p>
                      <p class="textoVerso">ENDERECO</p>
                  </div>
            </div>
        </div>
    </div>
  </center>
</body>

</html>

And the resulting pdf generated by pd4ml:
[attachment=C:\pd4ml.pdf][/attachment]

[Quote]

Subject: Re: CSS div positioning bug

PD4ML

Posted: 12 Apr 2010, 19:17

Unfortunately it did not attach your document to the message. But I guess the document absolute positioning suffers from the explicit page breaks.

Starting with v360fx1b1 PD4ML has 2 absolute positioning modes: document- and page-centric.

You may switch to another mode with

-Dpd4ml.absolute.address.space=document

JVM parameter, PD4ML API call

Map m = new HashMap();
m.put(PD4Constants.PD4ML_ABSOLUTE_ADDRESS_SPACE, "document");
pd4ml.setDynamicParams(m);

or with custom JSP tag, nested to <pd4ml:transform>

<pd4ml:parameters>
<pd4ml:parameter key="pd4ml.absolute.address.space" value="document"/>
</pd4ml:parameters>

As a result you'll get a document where absolute positioned blocks match relatively positioned blocks. But PD4ML also requires you explicitly define block dimensions.

[Quote]

Subject: Re: CSS div positioning bug

marcosurata

Posted: 12 Apr 2010, 19:32

Thank you for the quick reply.

I tried the parameter setting configuration, but it still did not work.

There is no "choose file" and "add the file" buttons to add a message attachment, so I am pasting below the source code of the jsp. If there is another way to send you the attachment files, I will be glad to send.

Quote:

<%@ taglib uri="/WEB-INF/pd4ml.tld" prefix="pd4ml" %><%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %><%@page contentType="application/pdf" %><%response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server %><c:set var="ctx" value="${pageContext.request.contextPath}" scope="request"/><c:set var="serverAddr" value="http://${pageContext.request.serverName}:${pageContext.request.serverPort}" scope="request"/><pd4ml:transform
screenWidth="400"
pageFormat="A4"
pageOrientation="portrait"
pageInsets="20,20,20,20,points"
enableImageSplit="false">
<pd4ml:parameters>
<pd4ml:parameter key="pd4ml.absolute.address.space" value="document"/>
</pd4ml:parameters>
<pd4ml:fix_base_path pattern="${ctx}" basePath="${serverAddr}">

<html>
<head>
<style type="text/css">
h2 {
page-break-after: always;
}
</style>
</head>
<body>
<center>
<div style=" background-color: aqua; width:100px; border-color: black; height:150px; border-width: 3px; border-style: solid;" >
<div style="background-color: green; ">CONTRACHEQUE 1</div>
<div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
<div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;">
div absolute da imagem
</div>
<div style="background-color: BLUE; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;">
<div id="destinatario" class="destinatario" >
<p class="textoVerso">MARCOS URATA</p>
<p class="textoVerso">ENDERECO</p>
</div>
</div>
</div>
</div>
<pd4ml:page_break />
<div style=" margin-top:5px; background-color: black; width:100px; height:150px; border-color: green; border-width: 3px; border-style: solid;">
<div style="background-color: yellow; ">CONTRACHEQUE 2</div>
<div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
<div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;">
div absolute da imagem
</div>
<div style="background-color: yellow; position: absolute; left: 0; top: 0;border-color: yellow; border-width: 3px; border-style: solid;">
<div id="destinatario" class="destinatario" >
<p class="textoVerso">MARCOS URATA</p>
<p class="textoVerso">ENDERECO</p>
</div>
</div>
</div>
</div>
<pd4ml:page_break />
<div style="margin-top:5px; background-color: lime; width:100px; height:150px; border-color:fuchsia; border-width: 3px; border-style: solid;">
<div style="background-color: silver; ">CONTRACHEQUE 3</div>
<div style="position: relative; border-color: red; border-width: 3px; border-style: solid;">
<div style=" position: absolute; left: 0; top: 0; border-color: maroon; border-width: 3px; border-style: solid;">
div absolute da imagem
</div>
<div style="background-color: silver; position: absolute; left: 0; top: 0; border-color: yellow; border-width: 3px; border-style: solid;">
<div id="destinatario" class="destinatario" >
<p class="textoVerso">MARCOS URATA</p>
<p class="textoVerso">ENDERECO</p>
</div>
</div>
</div>
</div>
</center>
</body>

</html>
</pd4ml:fix_base_path>
</pd4ml:transform>

[Quote]

Subject: Re: CSS div positioning bug

PD4ML

Posted: 12 Apr 2010, 19:41

Do you use PD4ML v360 or v360fx1b1? It is important.

You may send the file by email to support pd4ml.com

[Quote]

Subject: Re: CSS div positioning bug

marcos.urata

Posted: 12 Apr 2010, 19:50

HTML print screen

Attachment:

pd4ml.JPG [ 103.77 KiB | Viewed 1157 times ]

Resulting PDF

Attachments:

pd4ml.pdf [4.41 KiB]
Downloaded 130 times

[Quote]

Subject: Re: CSS div positioning bug

PD4ML

Posted: 12 Apr 2010, 19:55

As I see from the PDF document metadata you use v360, which does not "understand" the configuration switches I described. Please give a try to v360fx1b1.

But again: in order to get identical layouts, you need to explicitly specify block heights and widths.

[Quote]

Subject: Re: CSS div positioning bug

marcos.urata

Posted: 12 Apr 2010, 19:57

Quote:

Do you use PD4ML v360 or v360fx1b1? It is important.

Sorry about that. Just now I saw that there is a new version available!

Now it WORKED PROPERLY!

Thank you!

Here is new PDF:

Attachments:

pd4ml.pdf [4.62 KiB]
Downloaded 138 times

[Quote]

Subject: Re: CSS div positioning bug

Posted: 26 May 2010, 19:54

Hello,

I have pd4ml.pro.trial.360fx1 version and class PD4Constants doesn't contain PD4ML_ABSOLUTE_ADDRESS_SPACE.
Is it possible?

Regards,
pk

Last bumped by Anonymous on 26 May 2010, 19:54.

[Quote]

[Reply]

Page 1 of 1

[ 9 posts ]


	Copyright ©2004-10 zefer\|org. All rights reserved.

PDF Generating Tool Support Forum

CSS div positioning bug