Overlay problem
Hello
I tried to use the overlay band with a picture inside it to add a backgound picture to a report page but had some problem in doing that:
1.When I preview the report, the backgound picture is displayed above the data band instead of being overlaid with the data band.
2.I did'nt want to print out the backgound picture,so I set the overlay's printable property to false, but it did'nt work.
Can you tell me how to solve these problem. Thanks for your help.
I tried to use the overlay band with a picture inside it to add a backgound picture to a report page but had some problem in doing that:
1.When I preview the report, the backgound picture is displayed above the data band instead of being overlaid with the data band.
2.I did'nt want to print out the backgound picture,so I set the overlay's printable property to false, but it did'nt work.
Can you tell me how to solve these problem. Thanks for your help.
Comments
WebReport cannot display overlapped objects because it uses html table layout. There is no way to solve this problem now.
Hi,
I viewed the source html of a web report and found the background picture was rendered as an <img> element in a row between the heading row and data row.
So I wrote some javascript codes that remove the wrong positioned <img> element and set it to the background of the table soon after the web report is loaded and it worked fine.
<script type="text/javascript">
jQuery(function($){
var pageTable = $("table", document.getElementById("webReport"))[1];
var tdClass = $("td[@class^=webReports1p]";, pageTable)[0].className;
var imgSrc;
var n = $("td." + tdClass + " img", pageTable).length-1;
$("td." + tdClass + " img", pageTable).each(function(i){
if (i == n) imgSrc = this.src;
this.parentNode.removeChild(this);
});
pageTable.style.backgroundImage = "url(" + imgSrc + ")";
pageTable.style.backgroundRepeat = "no-repeat";
pageTable.style.border = "1px solid #cc0000";
});
</script>
There is also a similar problem in rtf export of the web report (the background picture is hidden behind the data) I guess maybe some rtf elements were not set properly.
I hope this practice can help to solve the overlay problem of the product.
This solution may be used as a temporary workaround. In the next version we will add layered html export which allows object overlapping.