Rectangle borders are not displayed - jasper-reports

Question

I have a requirement where I need to display a section of data surrounded by borders, like this:
I have tried to do it with adding Rectangle component in the Background band. In the internal preview window and PDF preview it is displayed as above, but when I run it in the server or use HTML preview, the border disappears. I have also tried to insert the Rectangle component in the Detail band and using Frames instead of a Rectangle, surrounding the data, but with the same problem.
I am using iReport 5.0.1 with compatibility set to JasperReports 3.5.1.
Here is my jrxml file:
<?xml version="1.0" encoding="UTF-8"?>
<jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd" name="Payslip" pageWidth="1000" pageHeight="842" whenNoDataType="AllSectionsNoDetail" columnWidth="960" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20">
<import value="org.joda.time.DateTime"/>
<style name="Headings" vAlign="Middle" lineSpacing="1_1_2" fontName="Arial" fontSize="12" isBold="true" isItalic="false" isUnderline="false" isStrikeThrough="false"/>
<style name="Data" isDefault="true" vAlign="Middle" lineSpacing="1_1_2" fontName="Arial" fontSize="11"/>
<parameter name="rptName" class="java.lang.String" isForPrompting="false"/>
<parameter name="company" class="java.lang.String"/>
<field name="empName" class="java.lang.String"/>
<field name="salaryMonthName" class="java.lang.String"/>
<field name="salaryMonthYear" class="java.lang.Integer"/>
<field name="employeeCode" class="java.lang.String"/>
<field name="designation" class="java.lang.String"/>
<field name="grade" class="java.lang.String"/>
<field name="location" class="java.lang.String"/>
<field name="department" class="java.lang.String"/>
<field name="branch" class="java.lang.String"/>
<field name="dateOfJoining" class="org.joda.time.DateTime"/>
<field name="pfNumber" class="java.lang.String"/>
<field name="panNumber" class="java.lang.String"/>
<field name="bankName" class="java.lang.String"/>
<field name="accountNumber" class="java.lang.String"/>
<field name="workingDays" class="java.lang.Double"/>
<field name="paidDays" class="java.lang.Double"/>
<field name="absentDays" class="java.lang.Double"/>
<background>
<band height="301">
<rectangle>
<reportElement mode="Transparent" x="0" y="120" width="324" height="165"/>
<graphicElement>
<pen lineWidth="2.0"/>
</graphicElement>
</rectangle>
<rectangle>
<reportElement mode="Transparent" x="324" y="120" width="320" height="165"/>
<graphicElement>
<pen lineWidth="2.0"/>
</graphicElement>
</rectangle>
</band>
</background>
<title>
<band height="102">
<line>
<reportElement x="0" y="43" width="265" height="1" forecolor="#3333FF"/>
<graphicElement>
<pen lineWidth="3.0"/>
</graphicElement>
</line>
<textField isStretchWithOverflow="true">
<reportElement x="0" y="0" width="405" height="32" forecolor="#3333FF"/>
<textElement lineSpacing="Single">
<font size="16" isBold="true"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$P{company}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="0" y="44" width="200" height="31" forecolor="#3333FF"/>
<textElement lineSpacing="Single">
<font fontName="Arial" size="18"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$P{rptName}]]></textFieldExpression>
</textField>
<textField pattern="EEE, d MMM yyyy HH:mm">
<reportElement mode="Opaque" x="843" y="71" width="117" height="20" forecolor="#FFFFFF" backcolor="#999999"/>
<textElement lineSpacing="Single">
<font fontName="Arial"/>
</textElement>
<textFieldExpression class="java.util.Date"><![CDATA[new java.util.Date()]]></textFieldExpression>
</textField>
<textField>
<reportElement x="92" y="82" width="129" height="20"/>
<textElement lineSpacing="Single">
<font size="14" isBold="true"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$F{salaryMonthName} + " " + $F{salaryMonthYear}]]></textFieldExpression>
</textField>
<staticText>
<reportElement x="0" y="82" width="92" height="20"/>
<textElement lineSpacing="Single">
<font size="14" isBold="true"/>
</textElement>
<text><![CDATA[For Month]]></text>
</staticText>
</band>
</title>
<detail>
<band height="205">
<staticText>
<reportElement style="Headings" x="12" y="23" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Code]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="43" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Name]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="63" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Designation]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="83" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Grade]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="103" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Location]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="123" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Department]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="143" width="91" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Branch]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="12" y="163" width="92" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Date of Joining]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="23" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[P. F. Number]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="43" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[PAN No.]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="63" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Pay Mode / Bank Name]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="83" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[A/C No.]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="103" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Working Days]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="123" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Paid Days]]></text>
</staticText>
<staticText>
<reportElement style="Headings" x="341" y="143" width="98" height="20"/>
<textElement lineSpacing="1_1_2"/>
<text><![CDATA[Absent Days]]></text>
</staticText>
<textField>
<reportElement x="154" y="23" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{employeeCode}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="43" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{empName}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="63" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{designation}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="83" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{grade}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="103" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{location}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="123" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{department}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="143" width="140" height="20"/>
<textElement lineSpacing="Single"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{branch}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="23" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{pfNumber}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="43" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{panNumber}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="63" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{bankName}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="83" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{accountNumber}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="103" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.Double"><![CDATA[$F{workingDays}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="123" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.Double"><![CDATA[$F{paidDays}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="492" y="143" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.Double"><![CDATA[$F{absentDays}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="154" y="163" width="140" height="20"/>
<textElement lineSpacing="1_1_2"/>
<textFieldExpression class="java.lang.String"><![CDATA[$F{dateOfJoining}.toString("dd-MMM-yyyy")]]></textFieldExpression>
</textField>
<break>
<reportElement x="0" y="184" width="960" height="1"/>
</break>
</band>
</detail>
</jasperReport>

Answer 1

The problem that you are having may be due to the fact that you cannot have objects overlapping in HTML. I have had this issue with Jasper before. If two objects (or more) overlap, only one of them will show on the report.
You could try using separate lines that do not overlap any of the other objects.
I have had trouble getting that to work so the way I have dealt with the situation in cases like yours is to use the borders of the text fields to make up the rectangles. For the top left label (Code), you can use it's top and left borders. For the middle labels, the left border. And for the bottom field (Date of Joining), the bottom and left borders. Then the opposite for the text fields. Then you can use padding on your text fields to make them look right. Sometimes I have a padding of 20 or more to get the effect I'm looking for.
I hope this helps.