Search code examples
javahtmlinternet-explorerjasper-reports

JasperReports: wrong positioning of text fields in Internet Explorer

The goal: represent a table with some cells merged, so that it will be rendered correctly both in PDF and HTML, using JasperReports (Java code, not JasperStudio).

The problem: when we open the created HTML file in Internet Explorer, the positions of elements are incorrect.

More information: each row is placed inside a band (JRDesignBand) in the detail section of a Jasper design. Within those two bands we have text fields (JRDesignTextField) with different widths. Here is how it looks in the PDF (items in the first band are prepended with "R.", those in the second band with "N."): enter image description here Everything is rendered as desired. However, the following happens in HTML (only in Internet Explorer): enter image description here As we can see, text fields no longer appear in correct positions, they seem to be stretched outside the table.

I'm using JasperReports 6.1.0. Edit: Same happens in JasperReports 6.2.2.

I'm grateful in advance for your suggestions!

Edit

The code: (If the error is not being reproduced, I suggest making the default font bigger.)

    /* Row 1 */
    JRDesignBand band1 = new JRDesignBand();

    JRDesignTextField textField1 = new JRDesignTextField();

    textField1.setX(80);
    textField1.setWidth(45);
    textField1.setStretchWithOverflow(true);

    JRDesignExpression jrExpression1 = new JRDesignExpression();
    jrExpression1.setText("\"A.1.\"");
    textField1.setExpression(jrExpression1);

    JRDesignTextField textField2 = new JRDesignTextField();

    textField2.setX(160);
    textField2.setWidth(45);
    textField2.setStretchWithOverflow(true);

    JRDesignExpression jrExpression2 = new JRDesignExpression();
    jrExpression2.setText("\"A.2. Lorem ipsum dolor sit\"");
    textField2.setExpression(jrExpression2);

    band1.addElement(textField1);
    band1.addElement(textField2);
    ((JRDesignSection) jasperDesign.getDetailSection()).addBand(band1);

    /* Row 2 */
    JRDesignBand band2 = new JRDesignBand();

    JRDesignTextField textField3 = new JRDesignTextField();

    textField3.setX(89);
    textField3.setWidth(331);
    textField3.setStretchWithOverflow(true);

    JRDesignExpression jrExpression3 = new JRDesignExpression();
    jrExpression3
            .setText("\"B.1. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor \"");
    textField3.setExpression(jrExpression3);

    band2.addElement(textField3);
    ((JRDesignSection) jasperDesign.getDetailSection()).addBand(band2);
Solution

  • In this thread I've found out that it is a widely-known issue in IE to display tables wrong - and I based my fix on the solution shown there (the most up-voted one - not the accepted one).

    In short, the easiest way is to add table-layout:fixed; to style attribute of each table tag (in HTML). This can be done by using an extended version of the HtmlExporter class, overriding its exportTable() method and adding the previously mentioned modification in two lines of that method:

    writer.write("<table class=\"jrPage\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"table-layout:fixed; empty-cells: show; width: ");

    and

    writer.write("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"table-layout:fixed; empty-cells: show; width: 100%;");