We hope there is a CSS expert and ListView expert that can help us.

We need help with using ASP.NET and ListView control to have reports that have one data record-per-page. We cannot figure out how to arrange the ListView's < ItemTemplate > to be sized to 8.5 x 11.0 inch size with 0.5 inch margins which also has a page-footer containing literal text (not data related).

When the page loads in the browser, one record per pager-page shows nicely (without a page-footer). The user can view a print-friendly html-file that contains all records formatted properly in a separate browser-tab, but we cannot place the footer at the correct position at the bottom of each html-page.

To generate the html-file, we are rendering a Placeholder control (that contains the local css and an html-table containing the ListView control) to Streamwriter to place the entire set of records to the html-file during the (non-postback) page-load. Then the pager page-size is changed to 1 to allow the user to page through the records. This html-file becomes a print-friendly browser-tab so the user can "save" the html-file to the user's computer, or the user can "print" this complete html-file to a user's printer.

Here is the html-file as produced by existing ASP.NET code and markup.

<html xmlns="http://www.w3.org/1999/xhtml">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Work Orders Report</title>
<style type="text/css"> 
    body                { font-family: tahoma, verdana, arial, helvetica, sans-serif; font-style: normal; font-size: 10pt; }
    table               { border-collapse: collapse; }
    #rptContent    td { border: none; padding-bottom: 3pt;}  /*border-bottom: 1px solid red;*/
    #tblComments   td { border-bottom: none; }
    #divCustHeader td { border-bottom: none; }
    #divVhclHeader td { border-bottom: none; }
    #divRptDate    td { border-bottom: none; }
    #rpt_footer       { position: absolute; bottom: 0; width:100%; }
    .divNoBtmBrdr  td { border-bottom: none; }
    .bold               { font-weight: bold; }
    .larger             { font-size: larger; }
    p.breakhere       { break-after: always; }
    .RPT_GroupHeader    { color:black;  background-color: #d3d3d3;  font-size: larger;  font-weight: bold;  border: 1px solid black;  text-align:center;  width:24em; }
    .RPT_Header1b     { color: Black; font-family: "Eras Demi ITC"; font-style: italic; font-weight: bold; font-size: 14pt; text-align: center; }
    .RPT_Header3        { font-family: tahoma, verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: small-caps; font-weight: bold; font-size: 12pt; text-align: center; }
    .styleTdLeft        { width: 33%; vertical-align: top; text-align:left; }
    .styleTdCenter      { width: 33%; vertical-align: top; text-align:center; }
<table id="rptContent" style="width: 20.32cm;">
        <td >
            <div style="height: 960px; position: absolute; top: 0; left: 0; ">   
                <tr ><td >
                    <div >
                        /// Header row : some data content ///
                <tr><td >
                    <div  >
                        /// Section-1 row optional data content ///
/// omitted <tr><td> sections 2, 3, 4 similar to sections 1 and 5///
                <tr ><td >
                    <div >
                        /// Section-5 row optional data content ///
                <tr ><td >
                    /// footer row text -- needs to be at bottom of the 11-inch page (less top/bottom margins) ///
                <p class="breakhere">&nbsp;</p>
                /// ... more records (meaning more pages) ///
                /// ... more records (meaning more pages) ///
                /// ... more records (meaning more pages) ///

The five section contents are optional based on the data, thus the white space between the last section and the footer will vary based on the data.

Your comments and solutions are welcome.

Related posts

Recent Viewed