Why is my report only filling up the top 2.5 inches of each browser page?

montypython1 · Mar 18, 2015

Why is my report only filling up the top 2.5 inches of each page in the browser?

I would like to attach an example, but the attachment option is not working. I've estimated that the output should fill approximately 7 (not 2.5) inches if printing to a landscape formatted report.

I have tried looking at the "Inspect Element" tool within Google Chrome (and FF), but can't seem to identify what CSS parameters are causing this behavior. Most of the parameters that I've tried to change are in the "Page" div class, such as: margin-top, margin-bottom, height, padding, etc.

Can someone point me in the right direction to fill up the entire page with output (not just the top 2.5 inches of every page)?

Thanks,
Dave

montypython1 · Mar 18, 2015

--- continued ---

Attached is an HTML example of the output displaying data on only the top 2.5 inches of every page.

Thanks,
Dave

jpadie · Mar 19, 2015

We would need the rendered html source code and all css to be able to help.

Tell us too what browser version and operating system you are using.

Look in your css for @media print rules. And for page-break-* rules. If you are using heights for divs ensure that you understand unit conversions. Or use ex as a unit. If you are using tables rather than stacked divs then consider specifying thead and tfoot elements and giving them proper style declarations for their type (so that they appear on every printed page that has the table on it).

feherke · Mar 19, 2015

Hi

To just avoid the premature page breaks, you can remove this :

CSS:

.page[teal]:[/teal]not[teal](:[/teal]first[teal]-[/teal]child[teal]) {[/teal]page-break-before[teal]:[/teal] always[teal]}[/teal]

But then the report will look dumb because the 3 pages will closely follow each other, so better replace it with this :

CSS:

.page[teal]:[/teal]not[teal](:[/teal]first[teal]-[/teal]child[teal]) {[/teal]margin-top[teal]:[/teal] 50px[teal]}[/teal]

Even so, the report will be ugly as each of its page will still have its designed header and footer, though they all be on the same paper. But that is hardcoded that way in the document's structure, so not something to be fixed with CSS. I would suggest to take a look at the generator software's configurations too.

Feherke.
feherke.ga

jpadie · Mar 19, 2015

ooh! that link did have the source code too. it looked like a pdf or something on my mobile browser. my bad.

looking at the source code it appears that the report generator is closing the page divs prematurely. So the whole issue may be predominantly a matter of a bug in the server side coding.

I have not tried this but intuitively this kind of construct might be better

1. use tables, thead, tfoot and tbody instead of floating divs. this is not inappropriate as your data is tabular.
2. don't impose page breaks arbitrarily other than at the end of a table where you _must_ have physical separation between records.
3. some browsers don't allow page-break declarations for non-block elements. So you may want to wrap all table cells in divs.

Code:

table:not(:first-child){page-break-before:always;}
tr{page-break-inside:avoid; page-break-after:auto;}

For page footers/headers you might want to look at the @page @position rules. You may need to fill the content of each page footer with javascript however as you would not know necessarily how many pages each report would fill (if you wanted page headers/footers to be dependent on the page level). Remember you can set the content of a header/footer by css

Code:

@page:first{@top{ content: element('#myFirstPageContent') ;}
@page:nth-child(2){@top {content: element('#mySecondPageContent') ;}};
..etc

If I have time tonight I will see whether your structure is easily re-renderable into this kind of format.

montypython1 · Mar 19, 2015

Thank you Feherke, Jpadie, SpamJim and ChrisHirst for your input.

Feherke, I changed ".page:not

first-child) {page-break-before: always}" to ".page:not

first-child) {margin-top: 50px}", but it did not seem to change the output. Is there some sort of hard page break that I just do not see?

Jpadie, I have never used THead, TFoot, or TBody, but I am open to the idea. Will this effect my other reports?

SpamJim and ChrisHirst, thank you for your earlier posts. My original posts and your responses were accidentally deleted by Tek-Tips (they informed me that they have fixed this issue, but I was not able to read your replies ... my apologies).

The formatting issue (only displaying records in the top 2.5 inches of every page) seems to only effect my summary reports. When I choose to display this report with detail records, then all of the page is properly filled with records. To my knowledge, all formatting is the same for both the detail and the summary formats.

Thank you all for your assistance.

Dave

jpadie · Mar 19, 2015

@Dave

the core issue is that your generator is inserting the page divs at the wrong place. it's not a css issue (although there may be one of those too) but that your server side code is closing the div in the middle of a report.

what server side code are you using?

feherke · Mar 19, 2015

Hi

Dave said:
I changed ".page:notfirst-child) {page-break-before: always}" to ".page:notfirst-child) {margin-top: 50px}", but it did not seem to change the output.

To clarify, that will only allow all three pages to be printed on the same paper, but will not rearrange the content into a single page.

I attached how it appears in FireFox 36.0.1's Print Preview after the modification. Not tried to actually print it, but according to my experiences the real print should look like the preview.

Feherke.
feherke.ga

montypython1 · Mar 19, 2015

Thank you Jpadie and Feherke,

Jpadie, I am creating the CSS using C#, and the data is coming from MySql (is this what you meant by asking what server-side code I am using?). It makes sense that the report generator is inserting the page divs at the wrong place, but I thought that this could be manually changed within the browser (in order to see format changes before doing any recoding).

Feherke, I see what you mean about the pages being grouped on the same page ... this included the report headers and page headers 3 times (even though it did indeed fit on one page). You are correct ... this is not what is needed. As both you and Jpadie suggested, the problem is probably within the Report Generator.

Still, I thought that this formatting could be manually changed within the browser (in order to see format changes before doing any recoding). Does this make sense?

Thanks,
Dave

jpadie · Mar 19, 2015

You must have some code that takes the mysql output and renders it to html. It is that code we need to see I think. Let's get the html correct before worrying about the css.

montypython1 · Mar 19, 2015

Ahhhh ... sorry ... here is the WriteHtml code:

Code:

        // ----------------------------------------------------------------------------------------------------------------------
        // Below section is used to standardize the formatting of the fields (ex: ".mgr" is used for all mgrs)
        protected decimal RecordInches = .110M, RecordHeaderInches = .110M, GroupFooterExtraInches = .015M, EndNoteInches = .125M;
        protected decimal[] GroupHeaderTotalInches = new[] { 0M, .32M, .22M, .19M, .19M, .19M };
        protected decimal[] GroupFooterMarginInches = new[] { .6M, .4M, .4M, .1M, .03M, .03M };
        protected override string SubTitle(DataTree root)
        {
            return "Group by " + (
                root.Criteria.Group_for_All_by_Dlr == Group_for_All_by_Dlr.Dealership ? "Dealership" :
                root.Criteria.Group_for_All_by_Dlr == Group_for_All_by_Dlr.DealershipCode1Newused ? "..." :
                root.Criteria.Group_for_All_by_Dlr.ToString());
        }
        protected override void WriteHtml(DataTree root, TextWriter stream)
        {
            BeginHtml(root, stream,
                GroupingCss(RecordInches, RecordHeaderInches, GroupFooterExtraInches) +
                (SummaryOnly() ? ".group2-header {border-top: 0px solid #0000FF; height: .01in; width: .02in} .group2-footer {border-bottom: 0px solid #0000FF; border-top: 0px solid #0000FF; margin-bottom: .01in}" : "") +
                ".total-label {font: bold 8pt Arial; white-space: normal; width: 3.270in}" +
                ".count-box {border: 1px solid red; height: .250in; margin-right: .10in; width: .800in}" +
                ".veh-count {font: 8pt Arial; text-align: right; width: .800in}" +
                ".veh-count6 {font: 6pt Arial; text-align: right; width: .800in}" +
                ".record > div, div.full-tall > div, div.half-tall8 > div, div.third-tall8 > div, div.third-tall7 > div, div.third-tall6 > div, div.fourth-tall6 > div {display: inline-block; vertical-align: baseline}" +
                ".dollars {border-left: 1px dashed black}" +
                ".full-tall {font: 8pt Arial; height: .360in}" +
                ".half-tall8 {font: 8pt Arial; height: .180in}" +
                ".third-tall6 {font: 6pt Arial; height: .120in}" +
                ".third-tall7 {font: 7pt Arial; height: .120in}" +
                ".third-tall8 {font: 8pt Arial; height: .120in}" +
                ".fourth-tall6 {font: 6pt Arial; height: .090in}" +

                ".text-0200w {width: .200in}" +
                ".text-0300w {width: .300in}" +
                ".record-header .text-0300w {width: .300in}" +
                ".text-0325w-right {width: .325in; text-align: right}" +
                ".text-0350w {width: .350in}" +
                ".text-0400w {width: .400in}" +
                ".text-0450w {width: .450in}" +
                ".text-0500w {width: .500in}" +
                ".text-0550w {width: .550in}" +
                ".text-0600w {width: .600in}" +
                ".text-0650w {width: .650in}" +
                ".text-0700w {width: .700in}" +
                ".text-0800w {width: .800in}" +
                ".text-0800w-b {width: .800in; font-weight: bold}" +
                ".text-0900w {width: .900in}" +
                ".text-1000w {width: 1.000in}" +
                ".text-1200w {width: 1.200in}" +
                ".text-1400w {width: 1.400in}" +
                ".text-1600w {width: 1.600in}" +
                ".text-1800w {width: 1.800in}" +
                ".text-3000w {width: 3.000in}" +

                ".text-0800w-6pt {font: 6pt Arial; width: .800in}" +

                ".stat {font: 8pt Arial; width: .250in}" +
                ".record-header .stat {width: .250in}" +

                // the following pairs of fields need to add up to equal the total widths between headers and the datafields
                ".date {width: .650in}" +
                ".record-header .date {width: .550in}" +
                ".deal-num {width: .450in}" +
                ".record-header .deal-num {width: .375in}" +
                ".rlw {width: .150in}" +
                ".record-header .rlw {width: .325in}" +

                ".stock-num {font-weight: bold; width: .750in}" +
                // use the text formats below instead of: ".year-make-model {width: 1.072in}" +

                ".dealership {width: .600in}" +
                ".name-last {width: .770in}" +

                ".codes {width: .591in}" +
                ".code {width: .197in}" +

                ".sls-num {text-align: right; width: .300in}" +
                ".record-header .sls-num {width: .300in}" +
                //".sls-name {width: 1.000in}" +

                ".slscmsn, .grosspyblsplit, .holdbacksplit, .packsplit {text-align: right; width: .500in}" +
                ".amt-0350w {text-align: right; width: .350in}" +
                ".amt-0400w {text-align: right; width: .400in}" +
                ".amt-0450w {text-align: right; width: .450in}" +
                ".amt-0500w {text-align: right; width: .500in}" +
                ".amt-0550w {text-align: right; width: .550in}" +
                ".amt-0600w {text-align: right; width: .600in}" +
                ".amt-0650w {text-align: right; width: .650in}" +
                ".amt-0700w {text-align: right; width: .700in}" +
                ".amt-0700w-b {text-align: right; width: .700in; font-weight: bold}" +
                ".amt-0700w-i {text-align: right; width: .700in; font: italic 8pt Arial}" +
                //".amt-0494w {text-align: right; width: .494in}" +
                //".amt-0572w, .vehprice, .vehcost {text-align: right; width: .572in}" +

                ".mgr {width: .700in}" +

                ".from-sales {text-align: center; white-space: pre; width: 3.7in}" + // was letter-spacing: 14px; but that didn't work in wkhtmltopdf
                ".end-note {font: 7pt Arial; height: .125in}",
                MakeLeafHtml(null, null), RecordHeaderInches
            );
            Recurse(root,
                (trunk, branch) => WriteToPage(root, stream, branch.Branches == null ?
                    MakeLeafHtml(null, branch.Leaf) :
                    Div("group" + branch.Level + "-header", "<span>" + HttpUtility.HtmlEncode(TrunkAndBranchName(branch)) + "</span>"),
                    branch.Branches == null ? RecordInches : GroupHeaderTotalInches[branch.Level]),
                (trunk, branch) => WriteTotalsHtml(root, stream, branch)
            );
            WriteTotalsHtml(root, stream, root);
            WriteToPage(root, stream,
                TextDiv("end-note", "Note: the column labeled \"Stat\" should contain the following codes:") +
                TextDiv("end-note", "\"S\"=Saved Deal;  \"E\"=Spot Delivered;  \"C\"=Closed in F+I, but not posted in Accounting;  \"F\"=Finalized in Accounting"),
                EndNoteInches * 3);
            EndHtml(root, stream);
        }

        protected override bool SummaryOnly()
        {
            return Act.Report.SortBy_Sum_Date_Stk == null || Act.Report.SortBy_Sum_Date_Stk == SortBy_Sum_Date_Stk.SummaryOnly;
        }

        protected void WriteTotalsHtml(DataTree root, TextWriter stream, DataTree branch)
        {
            if (branch.Branches != null)
                WriteToPage(root, stream, MakeLeafHtml(branch, branch.Totals), RecordInches + GroupFooterExtraInches + GroupFooterMarginInches[branch.Level]);
        }
        // ----------------------------------------------------------------------------------------------------------------------


        // ----------------------------------------------------------------------------------------------------------------------
        protected string LC(string s)
        {
            return (s ?? "").ToLower();
        }
        //
        // --- 20150204: Change following to single line for summary Ranking reports
        //
        protected string MakeLeafHtml(DataTree tree, DataLeaf leaf)
        {

            // The following determines the Page Hdr, the Data, the Totals:
            // used to render the page header (tree = null; leaf = null), a record (tree = null; leaf = the leaf),
            // or totals (tree = the tree; leaf = tree.Totals)
            var dollarDivs =
                Div("dollars",
                    Div("half-tall8",
                        //TextDiv("text-3000w", leaf == null ? "..." : "") +
                        TextDiv("amt-0700w", leaf == null ? "#Sold" : Decimal2(leaf.SlsSplit)) +
                        TextDiv("amt-0700w", leaf == null ? "#New" : Decimal2(leaf.Ct_N_Split)) +
                        TextDiv("amt-0700w", leaf == null ? "#Used" : Decimal2(leaf.Ct_U_Split)) +
                        TextDiv("amt-0700w", leaf == null ? "#Records" : Decimal2(leaf.Count)) +
                        TextDiv("amt-0700w-b", leaf == null ? "Commission" : Decimal2(leaf.SlsCmsn)) +
                        TextDiv("amt-0700w", leaf == null ? "GrossPybl" : Dollars(leaf.GrossPyblSplit)) +
                        TextDiv("amt-0700w-i", leaf == null ? "EffCmsn%" : leaf.EffCmsn_GrossPyblSplit) +
                        TextDiv("amt-0700w", leaf == null ? "AvgGrossPybl" : Dollars(leaf.GrossPyblSplit, leaf.SlsSplit))
                    )
                );

            if (tree != null)
                // This section is for TOTALS
                return Div("record group" + tree.Level + "-footer",
                    Div("", TextDiv("total-label", tree.Level == 0 ? "Grand Totals:" : "Totals: " + TrunkAndBranchName(tree))) +

                    dollarDivs

                );

            //--------- Left-most set of fields to display on report
            return Div(leaf != null ? "record" : "record record-header",
                //20150212: added below to align the column headers with the columns:
                Div("", TextDiv("total-label", "")) +

                dollarDivs //+

            );
        }
        // ----------------------------------------------------------------------------------------------------------------------
        protected virtual bool IsRankingReport()
        {
            return false;
        }
    }

Please let me know if this is what you requested.
Thanks,
Dave

jpadie · Mar 19, 2015

If that's the codethat outputs the problem tables then that's the right stuff! I will take a look a bit later to decypher it. Most of my C coding is for embedded systems but this looks simple enough anyway.

montypython1 · Mar 19, 2015

Many thanks ... your input is truly appreciated!

Dave

jpadie · Mar 19, 2015

nope. on analysis i cannot see the code there that is creating the page divs. you've either not provided the whole code or i am misunderstanding the C code.

i suspect it is in the writeToPage function.

assuming this is relatively anodyne the my next presumption is that the issue is in the way your query data is being returned to the C functions. you have not provided that layer.

have you considered sending the data as json and allowing a javascript reporting engine to take the burden of rendering a table meaningfully?

montypython1 · Mar 19, 2015

Jpadie,

Thanks ... I will dig into the code to see what I missed sending ... specifically a "writetopage" function. I am away from my desk, but will return in an hour and will find and send the missing code.

Regarding sending the data as JSON ... I had not considered that. What are the benefits and drawbacks?

Thanks,
Dave

montypython1 · Mar 19, 2015

Hi Jpadie,

As you requested, here is the function for "WriteToPage" (near the bottom of the code below). I've also included a few other functions that have to do with page formatting (ex: function "BeginPage" may be causing an issue, although the report displays perfectly when I run a report showing detail lines):

Code:

        protected void MakeHtml(Dictionary<string, Table> tables, string fullPath)
        {
            var stream = File.CreateText(fullPath);
            var root = ShapeData(tables);
            WriteHtml(root, stream);
            stream.Flush();
            stream.Close();
        }
        #endregion
        #region WriteHtml and support
        protected virtual void WriteHtml(DataTree root, TextWriter stream)
        {
            throw new NotImplementedException();
        }
        protected virtual string SubTitle(DataTree root)
        {
            return null;
        }

        protected int PageNum;
        protected string Header;
        protected decimal HeaderInches;
        protected decimal PageInchesRemaining;
        protected void BeginHtml(DataTree root, TextWriter stream, string css, string header, decimal headerInches)
        {
            stream.Write(
                "<html>" +
                "<head>" +
                "<title>" + HttpUtility.HtmlEncode(root.Criteria.Name) + "</title>" +
                "<style>" +
                // the "pages" class must be the first rule of the first rule so the script can dynamically modify it
                "@media screen {" +
                "	.pages {}" +
                "	body {background-color: #777}" +
                "	.floating-tools {background-color: #fff; border: 1px outset #222; color: #222; left: 3px; position: fixed; top: 3px}" +
                "	.floating-tools > div {border-bottom: 1px solid #222; border-right: 1px solid #222; cursor: pointer; font: 24px Arial,Helvetica,sans-serif; padding: 10px}" +
                "	.floating-tools > div:hover {background-color: #ddf}" +
                "	.page {background-color: #fff; border: 1px solid black; height: 7.5in; margin-bottom: 8px; padding: .5in; width: 10in}" +
                "}" +
                "@media print {" +
                "	body {width: 10in; zoom: .938}" +
                "	.floating-tools {display: none}" +
                "}" +
                "div {margin: 0; overflow: hidden; padding: 0; vertical-align: top; white-space: nowrap}" +
                "@charset \"utf-8\";@font-face{font-family:'u2000';src:url('[URL unfurl="true"]http://unicode-table.com/fonts/u/u2000-webfont.eot');src:url('http://unicode-table.com/fonts/u/u2000-webfont.eot?#iefix')[/URL] format('embedded-opentype'),url('[URL unfurl="true"]http://unicode-table.com/fonts/u/u2000-webfont.woff')[/URL] format('woff'),url('[URL unfurl="true"]http://unicode-table.com/fonts/u/u2000-webfont.ttf')[/URL] format('truetype'),url('[URL unfurl="true"]http://unicode-table.com/fonts/u/u2000-webfont.svg#universaliaregular')[/URL] format('svg');font-weight:normal;font-style:normal;}" +
                "@page {size: letter landscape; margin: 0.4in}" +
                ".page:not(:first-child) {page-break-before: always}" +
                ".page {page-break-inside: avoid}" +
                ".report-header {font: 14pt Arial; height: .25in; text-align: center; width: 10in}" +
                ".page-header-top {height: .20in}" +
                ".page-header-top .tc {background-color: white; color: blue; font: 12pt Arial; text-align: center; width: 10in}" +
                //".page-header-top .tc {background-color: black; color: white; font: 12pt Arial; text-align: center; width: 10in}" +
                ".page-header {height: .25in}" +
                ".page-header .tl {font: 6pt Arial; width: 1.5in}" +
                ".page-header .bl {font: 7pt Arial; width: 1.5in}" +
                //".page-header .tc {background-color: black; color: white; font: 12pt Arial; text-align: center; width: 7in}" +
                //".page-header .bc {background-color: black; color: white; font: 08pt Arial; text-align: center; width: 7in}" +
                ".page-header .c {background-color: white; color: blue; font: 08pt Arial; text-align: center; width: 7in}" +
                ".page-header .tr {font: 6pt Arial; text-align: right; width: 1.5in}" +
                ".page-header .br {font: 6pt Arial; text-align: right; width: 1.5in}" +
                ".page-footer {border-top: 1px solid black; font: 7pt Arial}" +
                ".page-footer .l {width: 3in}" +
                ".page-footer .c {text-align: center; width: 5in}" +
                ".page-footer .r {text-align: right; width: 2in}" +
                ".page-header > div, .page-footer > div {display: inline-block}" +
                css +
                "</style>\r\n" +
                // JavaScript will replace all "Page X" with "Page X of Y"
                "<script>" +
                    "window.onload=function(){" +
                        "p=0;" +
                        "while(document.getElementById('Page'+ ++p));" +
                        "m=p-1;" +
                        "while(--p>0)document.getElementById('Page'+p).innerText=' of '+m;" +
                    "};" +
                    "var z=1.0;" +
                    "function zoom(m){" +
                        "z*=m;" +
                        "var s=document.styleSheets[0].cssRules[0].cssRules[0].style;" +
                        "if (s.MozTransform!=undefined){s.MozTransform='scale('+z+')';s.MozTransformOrigin='0 0';}" +
                        "else if (s.OTransform!=undefined){s.OTransform='scale('+z+')';s.OTransformOrigin='0 0';}" +
                        "else s.zoom=z;" +
                        "s.zIndex=-1;" +
                    "}" +
                "</script>" +
                "</head>" +
                "<body><div class=\"floating-tools\">" +
                "<div onclick=\"javascript:zoom(1.25);\" title=\"Zoom In\">+</div>" +
                "<div onclick=\"javascript:zoom(.8);\" title=\"Zoom Out\">&ndash;</div>" +
                "<div onclick=\"javascript:window.print();\" title=\"Print\" style=\"font-family:u2000\">&#9113;</div>" +
                "</div><div class=\"pages\">");
            PageNum = 0;
            Header = header;
            HeaderInches = headerInches;
            BeginPage(root, stream);
        }

        protected string GroupingCss(decimal recordHeightInches, decimal headerHeightInches, decimal groupFooterExtraInches = 0M)
        {
            return
                ".record {border-top: 1px dashed black}" +
                ".record-header {border-top: 2px solid black}" +
                ".record > div {height: " + recordHeightInches + "in}" +
                ".record-header > div {height: " + headerHeightInches + "in; border-bottom: 2px solid black}" +
                ".group1-header {border-top: 2px solid #000000; height: .3in; padding-top: .01in; width: 10in} .group1-header > span {background-color: #000000; color: white; font: 14pt Arial; height: .25in}" +
                ".group2-header {border-top: 2px solid #0000FF; height: .2in; padding-top: .01in; width: 10in} .group2-header > span {background-color: #0000FF; color: white; font: 10pt Arial; height: .187in}" +
                ".group3-header {border-top: 2px solid #004000; height: .18in; padding-top: .01in; width: 10in} .group3-header > span {background-color: #004000; color: white; font: 8pt Arial; height: .166in}" +
                ".group4-header {border-top: 2px solid #800000; height: .18in; padding-top: .01in; width: 10in} .group4-header > span {background-color: #800000; color: white; font: 8pt Arial; height: .166in}" +
                ".group5-header {border-top: 2px solid #400080; height: .18in; padding-top: .01in; width: 10in} .group5-header > span {background-color: #400080; color: white; font: 8pt Arial; height: .166in}" +
                ".group5-footer {border-bottom: 1px solid #400080; border-top: 1px solid #400080; margin-bottom: .03in}" +
                ".group4-footer {border-bottom: 1px solid #800000; border-top: 1px solid #800000; margin-bottom: .03in}" +
                ".group3-footer {border-bottom: 1px solid #004000; border-top: 1px solid #004000; margin-bottom: .1in}" +
                ".group2-footer {border-bottom: 2px solid #0000FF; border-top: 1px solid #0000FF; margin-bottom: .4in}" +
                ".group1-footer {border-bottom: 2px solid #000000; border-top: 2px solid #000000; margin-bottom: .4in}" +
                ".group0-footer {border-bottom: 4px solid #000000; border-top: 4px solid #000000; margin-bottom: .6in}" +
                string.Join("", Enumerable.Range(0, 6).Select(level =>
                    ".group" + level + "-footer > div {height: " + (recordHeightInches + groupFooterExtraInches) + "in}").ToArray());
        }


        protected void EndHtml(DataTree root, TextWriter stream)
        {
            EndPage(root, stream);
            stream.Write("\r\n</div></body></html>");
        }

        protected void BeginPage(DataTree root, TextWriter stream)
        {
            stream.Write("\r\n<div class=\"page\">");
            PageInchesRemaining = 6.5M; // 6.5M or 7.2M if we weren't using wkhtmltopdf // ????Does this dictate how much can display on a page?
            if (++PageNum == 1)
            {
                stream.Write(TextDiv("report-header", Req.Org.Name));
                PageInchesRemaining -= .5M;
            }
            stream.Write(Div("page-header-top",
                Div("", TextDiv("tc", root.Criteria.Name))));
            var subTitle = SubTitle(root);
            stream.Write(Div("page-header",
                Div("", TextDiv("tl", "Deal dates from") + TextDiv("bl", MonthDayAndYear(root.Criteria.DateRange.Begin) + " to " + MonthDayAndYear(root.Criteria.DateRange.End))) +
                (subTitle == null ? "" : Div("", TextDiv("c", subTitle))) +
                Div("", TextDiv("tr", "Printed on " + DateTime.Now.ToString("MM/dd/yyyy @ HH:mm")) + 
                "<div class=\"br\">Page " + PageNum + "<span id=\"Page" + PageNum + "\"></span></div>")));

            PageInchesRemaining -= .25M;
            stream.Write(Header);
            PageInchesRemaining -= HeaderInches;
        }

        protected void EndPage(DataTree root, TextWriter stream)
        {
            // write page footer, and then ending </div> for <div class="page"> above
            stream.Write("<div class=\"page-footer\" style=\"margin-top: " + PageInchesRemaining + "in\">" +
                TextDiv("l", root.Criteria.Path) +
                TextDiv("c", "Note: these figures are preliminary, and may NOT contain open RO amounts, chargebacks and other costs.") +
                TextDiv("r", "1on1 Reporting Tools   800-847-3111") +
                "</div></div>");
        }

        protected void WriteToPage(DataTree root, TextWriter stream, string content, decimal contentInches)
        {
            if (contentInches > PageInchesRemaining)
            {
                EndPage(root, stream);
                BeginPage(root, stream);
            }
            stream.Write("\r\n" + content);
            PageInchesRemaining -= contentInches;
        }

        protected string Div(string className, string content)
        {
            // render <div> with 0 or more child elements
            return "<div" + (string.IsNullOrEmpty(className) ? "" : " class=\"" + className + "\"") + ">" + content + "</div>";
        }

        protected string TextDiv(string className, string text)
        {
            // render <div> with text
            return Div(className, HttpUtility.HtmlEncode(text));
        }

Thanks,
Dave

jpadie · Mar 20, 2015

I think the definition of PageInchesRemaining is a bit short.
If you are using Letter paper in Landscape then you have 8.5inches. subtract 0.5 from each end and you are at 7.5.
so not sure why you are setting to 6.5" in BeginPage.

also you can tell that something is going wrong as if you have a look at the page-footer inline style it discloses that, at that point, the PageInchesRemaining is only 0.005". and later at 0.3 (which is in itself interesting as that suggests that the inbound contentInches is greater than that - so probably one of the groupFooterMarginInches array).

for debugging I suggest that you footprint the WriteToPage code. In this case I'd suggest adding a hidden div that contains the contentInches and PageInchesRemaining. Try adding this and then post back the renderered html (or upload it like last time).

Code:

//end of writeToPage
stream.Write("\n\n" + "<div style=\"display:hidden\">" + "\n" + contentInches  = " + contentInches + "\n" + "PageInchesRemaining = " + PageInchesRemaining +"\n" + "</div>");

My suspicion is that the function is being called more often than you expect, potentially for blank content lines. although then I'd expect to see more linebreaks in the source-code <scratching head>

jpadie · Mar 20, 2015

It would also be useful to put some footprinting at the beginning of the function. so please use this instead

Code:

protected void WriteToPage(DataTree root, TextWriter stream, string content, decimal contentInches)
{
  stream.Write("\n\n" + "<div style=\"display:hidden\">" + "\n" + "Start of function" + "\n" + "contentInches  = " + contentInches + "\n" + "PageInchesRemaining = " + PageInchesRemaining +"\n" + "</div>"); 
  if (contentInches > PageInchesRemaining)
  {
    stream.Write("\n\n" + "<div style=\"display:hidden\">Calling End Page</div>"); 
    EndPage(root, stream);
    BeginPage(root, stream);
  }
  stream.Write("\r\n" + content);
  PageInchesRemaining -= contentInches;
  stream.Write("\n\n" + "<div style=\"display:hidden\">" + "\n" + "End of function" +"\n" + "contentInches  = " + contentInches + "\n" + "PageInchesRemaining = " + PageInchesRemaining +"\n" + "</div>"); 
}

montypython1 · Mar 20, 2015

Jpadie,

Thank you for your assistance. I am excited to implement your suggestions as soon as possible (probably tomorrow, since I am currently out of the office).

Much appreciated!
Dave

jpadie · Mar 21, 2015

sorry - the reference to 'hidden' in the two lines above should be to 'none'. the purpose is to hide the divs so they don't break the visual flow but are nevertheless evident in the source code.

Code:

protected void WriteToPage(DataTree root, TextWriter stream, string content, decimal contentInches)
{
  stream.Write("\n\n" + "<div style=\"display:none\">" + "\n" + "Start of function" + "\n" + "contentInches  = " + contentInches + "\n" + "PageInchesRemaining = " + PageInchesRemaining +"\n" + "</div>"); 
  if (contentInches > PageInchesRemaining)
  {
    stream.Write("\n\n" + "<div style=\"display:none\">Calling End Page</div>"); 
    EndPage(root, stream);
    BeginPage(root, stream);
  }
  stream.Write("\r\n" + content);
  PageInchesRemaining -= contentInches;
  stream.Write("\n\n" + "<div style=\"display:none\">" + "\n" + "End of function" +"\n" + "contentInches  = " + contentInches + "\n" + "PageInchesRemaining = " + PageInchesRemaining +"\n" + "</div>"); 
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Why is my report only filling up the top 2.5 inches of each browser page?

Technical User

Technical User

Technical User

Programmer

Technical User

Technical User

Technical User

Programmer

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor