Jasper Reports – align dynamic text fields and their labels horizontally

alignmentireportjasper-reportstextfield

I'm using Jasper report 5.2, iReport 5.2 and exporting the report in RTF and PDF formats.

In my report I want to add few text fields along with their (static text)labels aligned horizontally like

         Name:  $F{name}
          Age:  $F{age}
Date of Birth:  $F{dateOfBirth}

But I'm unable to align them. This is what I tried

Position Type: float (for all static text and fields)
Stretch Type: no stretch (for all static text and fields)
Stretch With Overflow: True (for all dynamic text fields)

The image shows what I get and what I want.
Moreover, my text field's content is dynamic i.e. content size could vary.
enter image description here

I've read many forums but could not find a solution, please suggest.

Thanks

Best Answer

It can be easily done with help of container - the Frame element.

You should put Frame with Position Type as Float and put to them both staticText (label) and textField.

For textField I've set Position Type as Float the Stretch With Overlfow as true.

The sample

The 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="textfields_allign" language="groovy" pageWidth="595" pageHeight="842" whenNoDataType="AllSectionsNoDetail" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="d855bf18-5e9b-4060-8caa-3fdd08abce3b">
    <parameter name="name" class="java.lang.String"/>
    <parameter name="id" class="java.lang.String"/>
    <parameter name="date" class="java.lang.String"/>
    <title>
        <band height="69" splitType="Stretch">
            <frame>
                <reportElement uuid="314bfd5b-7b0a-42f4-aca3-e61f0283f126" positionType="Float" x="213" y="1" width="243" height="20"/>
                <staticText>
                    <reportElement uuid="e07201bb-a677-4dc9-a332-f94e6eca2722" positionType="Float" x="0" y="0" width="100" height="20" isPrintWhenDetailOverflows="true"/>
                    <textElement/>
                    <text><![CDATA[Name]]></text>
                </staticText>
                <textField isStretchWithOverflow="true">
                    <reportElement uuid="66c93a44-9015-4ae9-bf05-b68b2420f3ef" positionType="Float" x="121" y="0" width="100" height="20" isPrintWhenDetailOverflows="true"/>
                    <textElement/>
                    <textFieldExpression><![CDATA[$P{name}]]></textFieldExpression>
                </textField>
            </frame>
            <frame>
                <reportElement uuid="8311a483-955e-4280-a9ac-513d7d34495b" positionType="Float" x="213" y="21" width="243" height="20"/>
                <staticText>
                    <reportElement uuid="da404b4e-7908-40ae-8e1b-38e19d9ddc7f" positionType="Float" x="0" y="0" width="100" height="20" isPrintWhenDetailOverflows="true"/>
                    <textElement/>
                    <text><![CDATA[ID]]></text>
                </staticText>
                <textField isStretchWithOverflow="true">
                    <reportElement uuid="e0e312e8-cd2f-48af-8ae8-df95c6195488" positionType="Float" x="121" y="0" width="100" height="20" isPrintWhenDetailOverflows="true"/>
                    <textElement/>
                    <textFieldExpression><![CDATA[$P{id}]]></textFieldExpression>
                </textField>
            </frame>
            <frame>
                <reportElement uuid="8ff2baf9-b0ec-4c8a-b54a-9edd08b200cc" positionType="Float" x="213" y="41" width="243" height="20"/>
                <staticText>
                    <reportElement uuid="b8d97db0-250a-43c8-a2f3-2fa3668c5d15" positionType="Float" x="0" y="0" width="100" height="20" isPrintWhenDetailOverflows="true"/>
                    <textElement/>
                    <text><![CDATA[Date]]></text>
                </staticText>
                <textField isStretchWithOverflow="true">
                    <reportElement uuid="4daa4d17-28be-4ac8-8e1e-2efbeec5f690" positionType="Float" x="121" y="0" width="100" height="20" isPrintWhenDetailOverflows="true"/>
                    <textElement/>
                    <textFieldExpression><![CDATA[$P{date}]]></textFieldExpression>
                </textField>
            </frame>
        </band>
    </title>
</jasperReport>

The report's design in iReport:

enter image description here

The result will be (via iReport preview):

enter image description here

Warning! This answer is too old and doesn't work on modern browsers.

_{I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).}

As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).

After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

Inputs must be on their own line.
Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

Before I get into any explanation, I'll just give you the code:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Here is the working example in JSFiddle.

This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.

Things to note:

The *overflow declaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you're still better off with conditional comments; just used it for simplicity.
As best I can tell, the only vertical-align statement that was consistent across browsers was vertical-align: bottom. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.
The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn't padding or margin, and it's damned persistent. Setting a width and height on the checkbox and then overflow: hidden for some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox.
Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.

Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently.

Warning! This answer is too old and doesn't work on modern browsers.

Variable Expression: Count all records where condition >0 is met

I figured it out:

VARIABLE

Variable Name: PART_COUNT

Variable Class Type: Java.lang.Double

Calculation Type: Sum

Reset Type: Group

Reset Group: LOCATION_ID

Increment Type: None

Variable Expression: new Double($F{QUANTITY_SENT}.doubleValue() > 0.00 ? 1.0:0.0)

TEXT FIELD

Text Field Expression Class: Java.lang.Double

Evaluation Time: Group

Evaluation Group: LOCATION_ID

Text Field Expression: $V{PART_COUNT}

QUESTION How do I now switch this expression to return an integer??

Thanks for pointing me in the right direction.

Best Answer

The sample

Related Solutions

Html – How to align checkboxes and their labels consistently cross-browsers

Warning! This answer is too old and doesn't work on modern browsers.

Warning! This answer is too old and doesn't work on modern browsers.

Variable Expression: Count all records where condition >0 is met

Related Topic