I have simplified the problem I am having down by creating an empty report
with and Page Header, Body and PageFooter. I have set the BackgroundColor
of all three to "White".
I am using VS.NET to design the Report and ASP.NET with C# to call the
Reporting Services web service Render method using HTML4.0 format to render
the report inline on my web page with a blue background.
The css (a1_s) for the Body does not a Background color as seen below in the
Supporting Examples:
The bigger problem is that I have a Table in the Body. Both do not have a
CanGrow or CanShrink property, at least exposed in VS.NET. The Table is the
only thing in the Body. The Table has a Header, Group, Detail and Footer.
If the report returns no detail, I see the Table Header and the Table
Footer. It knew to collapse/shrink the Group and Detail sections but did
not shrink the Table and/or the Body. Under the Table Footer and before the
Page Footer is a gap which is the transparent area.
The Lame workarounds I have found so far are:
- reduce the Height of the Body and the Table to the smallest allowed by the
VS.NET, but during design you have to increase it and not forget to decrease
it when you are done
- put the Table in a rectangle with a "White" BackgroundColor but there is
still a big gap between the Table Footer and Page Footer
Supporting Examples:
The RDL is:
<?xml version="1.0" encoding="utf-8"?>
<Report
xmlns="
http://schemas.microsoft.com/sqlserver/reporting/2003/10/reportdefini tion"
xmlns:rd="
http://schemas.microsoft.com/SQLServer/reporting/reportdesigner"> <PageHeader>
<PrintOnLastPage>true</PrintOnLastPage>
<PrintOnFirstPage>true</PrintOnFirstPage>
<Style>
<BackgroundColor>White</BackgroundColor>
</Style>
<Height>0.25in</Height>
</PageHeader>
<RightMargin>1in</RightMargin>
<Body>
<Style>
<BackgroundColor>White</BackgroundColor>
</Style>
<Height>2in</Height>
</Body>
<TopMargin>1in</TopMargin>
<Width>6.5in</Width>
<LeftMargin>1in</LeftMargin>
<rd:SnapToGrid>true</rd:SnapToGrid>
<rd:DrawGrid>true</rd:DrawGrid>
<rd:ReportID>89d2899d-7bc6-4d9d-b3f5-1bee26df10a3</rd:ReportID>
<PageFooter>
<PrintOnLastPage>true</PrintOnLastPage>
<PrintOnFirstPage>true</PrintOnFirstPage>
<Style>
<BackgroundColor>White</BackgroundColor>
</Style>
<Height>0.25in</Height>
</PageFooter>
<BottomMargin>1in</BottomMargin>
<Language>en-US</Language>
</Report>
The CSS snippet is:
..a1_s{HEIGHT:50.80mm;overflow:hidden;WIDTH:165.10mm}
..a3{border:1pt None
Black;background-color:White;background-repeat:Repeat;padding-left:0pt;paddi
ng-top:0pt;padding-right:0pt;padding-bottom:0pt;HEIGHT:6.35mm;overflow:hidde
n;WIDTH:100%}
..a5{border:1pt None
Black;background-color:White;background-repeat:Repeat;padding-left:0pt;paddi
ng-top:0pt;padding-right:0pt;padding-bottom:0pt;HEIGHT:6.35mm;overflow:hidde
n;WIDTH:100%}
The generated HTML for the report is
<div id="oReportDiv" onresize="javascript:OnResizeDiv()" style="OVERFLOW:
auto; WIDTH: 100%; HEIGHT: 100%">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="oReportCell" style="PADDING: 10px">
<DIV class="a3"> </DIV>
<DIV class="a1_s"> </DIV>
<DIV class="a5"> </DIV>
<script language="javascript" type="text/javascript">
<!--
var docMapIds = [];
//-->
</script>
</td><td style="WIDTH: 100%; HEIGHT: 0px"></td>
</tr><tr>
<td style="WIDTH: 0px; HEIGHT: 100%"></td>
</tr>
</table>
</div>