Welcome Guest Search | Active Topics | Sign In | Register

Margins for long pages aren't working. (Or I'm doing it wrong) Options
Tony
Posted: Monday, April 1, 2013 11:53:24 AM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
I've got a problem defining the top margin on a page.

I have some code which loads 3 pages. Each page is a separate aspx page. The pages have CSS which defines a margin. It works well until page one gets too long (sometimes there is a lot more content).

The page rolls to a second page. But the top margin on the second page is too small. I have a header which overlapping the content.

Below is the code I'm using. The "OutputArea" bits of code seem to have no impact. :(


//Set the response header
HttpResponse response = HttpContext.Current.Response;
response.Clear();
response.ClearHeaders();
response.ContentType = "application/pdf";

PdfDocument doc = new PdfDocument();

HtmlToPdf.Options.OutputArea = new System.Drawing.RectangleF(1f, 0.5f, 7.5f, 10f);

string wo = Request.QueryString["wo"];
string rev = Request.QueryString["rev"];
string sp = "";

//Convert to the output stream
HtmlToPdf.ConvertUrl(ConvertRelativeUrlToAbsoluteUrl(string.Format("~/wo/wo-template/Page1.aspx?wo={0}&rev={1}", wo, rev)), doc);
HtmlToPdf.ConvertUrl(ConvertRelativeUrlToAbsoluteUrl(string.Format("~/wo/wo-template/Page2.aspx?wo={0}&rev={1}", wo, rev)), doc);
HtmlToPdf.ConvertUrl(ConvertRelativeUrlToAbsoluteUrl(string.Format("~/wo/wo-template/Page3.aspx?wo={0}&rev={1}", wo, rev)), doc);

int iPages = doc.Pages.Count;

string Sql = String.Format(@"
select v.Name
from WorkOrders wo, Vendors v
where wo.Vendor_Id=v.Id
and wo.Number={0}
and wo.Revision={1}"
, wo, rev);
cConn conn = new cConn();
conn.Open();
System.Data.SqlClient.SqlDataReader dr = conn.Execute(Sql);
if (dr.Read())
{
sp = dr[0].ToString();
}
conn.Close();

string Header = String.Format(@"
<div style=""font-size: .9em; font: 12px Arial;"">
<div style=""float:right; position:relative;"">Page #PAGE# of {0}</div>
<b>Work Order</b><br />
Work Order Number: {1}<br />
Service Provider: {2}
</div>", iPages
, wo + '.' + rev
, sp);

foreach (PdfPage page in doc.Pages)
{
HtmlToPdf.Options.OutputArea = new System.Drawing.RectangleF(1f, 0.2f, 7.5f, 10f);
HtmlToPdf.ConvertHtml(Header.Replace("#PAGE#", (page.Index + 1).ToString()), page);
}

doc.Save(Response.OutputStream);
response.End();

}

public string ConvertRelativeUrlToAbsoluteUrl(string relativeUrl) {
return string.Format("http{0}://{1}{2}{3}",
(Request.IsSecureConnection) ? "s" : "",
Request.Url.Host,
(Request.Url.Port > 0) ? ":" + Request.Url.Port : "",
Page.ResolveUrl(relativeUrl)
);
eo_support
Posted: Monday, April 1, 2013 2:38:10 PM
Rank: Administration
Groups: Administration

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

That's normal. The page's margin is ONLY applied once for the whole HTML page. When an HTML page spans over multiple PDF page, the top margin is only applied to the first PDF page and the bottom margin is only applied to the last PDF page (obviously the left and right margin applies on every PDF page).

You can use OutputArea to adjust margins too. But that does not change the above rule.

Thanks!
Tony
Posted: Monday, April 1, 2013 3:58:18 PM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
So is there anything that can be done about this? Is there ANY way I can get the margins applied equally across all pages (including roll-over pages)
eo_support
Posted: Monday, April 1, 2013 4:28:44 PM
Rank: Administration
Groups: Administration

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

You will need to apply margin with HtmlToPdf.Option.OutputArea. The rule is:

1. HtmlToPdf.Options.OutputArea applies to PDF page;
2. Your margin in your HTML applies to HTML page;

Hope this clears up.

Thanks!
Tony
Posted: Tuesday, April 2, 2013 11:21:41 AM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
Ok, so the odd thing is... the HtmlToPdf.Options.OutputArea pushes my header down (green section) but has no effect whatsoever on the roll-over content. (red)



I'm trying to get that roll-over content to push down the page more so my header can stay in place.

Any solutions?

Is this a feature/bug fix request at this point?
eo_support
Posted: Tuesday, April 2, 2013 1:54:41 PM
Rank: Administration
Groups: Administration

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

I am not sure what you meant by the roll over content. The very first thing you must do is to stay with just one conversion. Once we get a single conversion work the way you wanted, you can continue to work on multiple conversions. So I will need you to retry with just a single conversion, and then explain what are the problems.

Thanks!
Tony
Posted: Tuesday, April 2, 2013 2:29:00 PM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
Sorry if I was unclear.

I am adding a "page" to the PDF. ~/page1.aspx

Normally the page renders short enough to be on a single PDF page. However, sometimes the content is necessarily much longer and the content rolls over to a second page in the PDF document. In the screen shot above the line is the bottom of the table on page one. so it is just barely rolling over to a second page.

If the content rolls over the margins on that second PDF page are ignored for the content. The header, however, as you can see, is pushed down to fit in the OutputArea constraint.

Do you need me to write an example page to show what I mean?
eo_support
Posted: Tuesday, April 2, 2013 2:37:35 PM
Rank: Administration
Groups: Administration

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

The header has nothing to do with OutputArea. OutputArea decides the output area of the main output. When the main contents spills over to the second page, it should still honors OutputArea. If you see a different behavior, please try to isolate the problem into a small test page, post the test page and we will be happy to take a look.

Thanks!
Tony
Posted: Tuesday, April 2, 2013 4:52:31 PM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
Ok. Here is the code. The first section is the code behind for a very simple page with one button. The second is the ASPX of the overflow.aspx and the third is its code behind.

pdf.aspx.cs
Quote:
public string ConvertRelativeUrlToAbsoluteUrl(string relativeUrl) {
return string.Format("http{0}://{1}{2}{3}",
(Request.IsSecureConnection) ? "s" : "",
Request.Url.Host,
(Request.Url.Port > 0) ? ":" + Request.Url.Port : "",
Page.ResolveUrl(relativeUrl)
);
}

protected void btnOverflow_Click(object sender, EventArgs e)
{
//Set the response header
HttpResponse response = HttpContext.Current.Response;
response.Clear();
response.ClearHeaders();
response.ContentType = "application/pdf";

PdfDocument doc = new PdfDocument();

HtmlToPdf.Options.OutputArea = new System.Drawing.RectangleF(0.5f, 0.5f, 7.5f, 10f);

string wo = Request.QueryString["wo"];
string rev = Request.QueryString["rev"];
string sp = "";

//Convert to the output stream
HtmlToPdf.ConvertUrl(ConvertRelativeUrlToAbsoluteUrl("~/wo/wo-template/Overflow.aspx"), doc);

int iPages = doc.Pages.Count;

string Header = String.Format(@"
<div style=""font-size: .9em; font: 12px Arial;"">
<div style=""float:right; position:relative;"">Page #PAGE# of {0}</div>
<b>Work Order</b><br />
Work Order Number: 573.1<br />
Service Provider: A.Company
</div>", iPages
);


foreach (PdfPage page in doc.Pages)
{
HtmlToPdf.Options.OutputArea = new System.Drawing.RectangleF(0.5f, 0.5f, 7.5f, 10f);
HtmlToPdf.ConvertHtml(Header.Replace("#PAGE#", (page.Index + 1).ToString()), page);
}

doc.Save(Response.OutputStream);
response.End();
}


Overflow.aspx
Quote:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Overflow.aspx.cs" Inherits="wo_wo_template_Overflow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body { font: 12px Arial; margin: 20mm 0mm 0mm 0mm;}
table.pdf { border: 2px solid #000; width: 100%; font: 12px Arial; padding: 0px; margin: 0px; border-spacing: 0px; border-collapse:collapse; }
table.pdf td {padding: 4px; margin: 0px; }
table.pdf td.gray {background-color: #ccc; }
.title {border-bottom: 1px solid #000; text-align:center; font: bold 1.5em Calibri, Arial; margin: 10px 0;}
.header {font-size: .9em;}
.right { float:right; position:relative;}
.tableTitle { font-weight: bold;}
.w150 { width:150px;}
.borderRight {border-right: 1px solid #000;}
.borderBottom { border-bottom: 1px solid #000; }
.borderBottom2 {border-bottom: 2px solid #000;}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Literal ID="litOut" runat="server"></asp:Literal>

</form>
</body>
</html>


Overflow.aspx.cs
Quote:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class wo_wo_template_Overflow : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
litOut.Text = "<table border='1' cellpadding='3' cellspacing='0' width='200'>";
for(int i = 1; i < 100; i++)
{
litOut.Text += string.Format(@"
<tr>
<td>Row {0}</td>
<tr>", i);
}
litOut.Text += "</table>";
}
}
Tony
Posted: Tuesday, April 2, 2013 4:56:58 PM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
The Below are screenshots from the top of the resulting 3 page PDF. First page is fine, the next are all manner of messed up. (click to see the details)





eo_support
Posted: Tuesday, April 2, 2013 6:49:11 PM
Rank: Administration
Groups: Administration

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

That's because your body element has a top margin 20mm. You need to remove that and ONLY rely on HtmlToPdf.Options.OutputArea.

Thanks!
Tony
Posted: Friday, April 5, 2013 10:33:30 AM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
So I removed the CSS margins and now ALL the pages' content is smashed up underneath/overwritten by the header. (not a good thing)

Increasing the top margin pushes EVERYTHING down (including the header)

In the example code above, just remove the Margin section from the body section of the CSS. Then increase the Y component to 1.5 inches (or do it individually).

SURELY there is some way to have a larger header than the default...

EDITED - for clarity.
eo_support
Posted: Friday, April 5, 2013 10:43:57 AM
Rank: Administration
Groups: Administration

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

You need to forget about CSS. Use HtmlToPdf.Options.OutputArea for margin. Period.

If you want the main content and your header have different margins, use different HtmlToPdf.Options.OutputArea settings. It's really as straight forward as that. You keep mixing the CSS into the picture and that will confuse you more.

Thanks!
Tony
Posted: Friday, April 5, 2013 12:00:15 PM
Rank: Newbie
Groups: Member

Joined: 12/10/2012
Posts: 9
Ok, sorry. Silly me. I missed somehow that the header had its own OutputArea. Derp. Thank you!


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.