JasperReports: wrong positioning of text fields in Internet Explorer

Question

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."): Everything is rendered as desired. However, the following happens in HTML (only in Internet Explorer): 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);

Did you use only the *JasperReports API* without using template (*jrxml*)? — Alex K, May 20 '16 at 14:16
I'm only using API (because that's how it is supposed to work), without using jrxml. Haven't tried doing the same in iStudio/iReport. In what way would it help? — Takatam, May 20 '16 at 14:23
It is an easier to make an error in building report via Java code. You should post the Java code of simple case to reproduce your problem — Alex K, May 20 '16 at 15:43
Thank you for your suggestion. I uploaded code for the simplest example I could get that recreates the error. If you wish to try it out, I suggest using a big font and some sort of a background (it's easy to see that the positioning is wrong then). — Takatam, May 20 '16 at 17:39
@AlexK I'm guessing it might be worth a shot to report it as a bug? — Takatam, May 23 '16 at 11:14
I'm not able to reproduce your issue - everything is ok. I used even the font size 20 (*defaultStyle.setFontSize(20.0f);*). I used: *SimpleHtmlExporterOutput* and *HtmlExporter*. Did you the same classes? The *JasperReports API* version is *6.2.2*. I tried the *Arial* font. I've also used this code: *textField2.setStretchType(StretchTypeEnum.RELATIVE_TO_TALLEST_OBJECT);* — Alex K, May 23 '16 at 21:40
Interesting! I used _JasperExportManager_, but it makes no difference. What makes a difference is the font (_Courier New_ in my case). With _Arial_ it looks almost correct (but by comparing to PDF output and using: `textField.getLineBox().getPen().setLineColor(Color.RED);` one can see that it's still not perfect). — Takatam, May 24 '16 at 07:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112748/discussion-between-alex-k-and-takatam). — Alex K, May 24 '16 at 07:34
@AlexK I tried it out in Dynamic Reports and have exactly the same problem. Do you still have the code you used to create JasperDesign and export it? Could you paste it, please? — Takatam, May 30 '16 at 11:01
@AlexK No need to do that. I've found a solution, I'll try and write it in an answer today. — Takatam, May 31 '16 at 10:24

score 1 · Accepted Answer · edited May 23 '17 at 11:52

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%;");

JasperReports: wrong positioning of text fields in Internet Explorer

1 Answers1