Aligning Calendar Components With Other Fields

Hello,

I am working on a visual web application. I don't think I'm doing anything too esoteric, but I am having difficulty aligning the Woodstock calendar component correctly with other fields.

In my JSP page, I have a grid panel with three colums, one for labels, one for input fields and one for messages, fairly basic, standard stuff.

I added a couple of styles to the generated stylesheet.css file to right align and left align labels and input fields, respectively:

.leftAlign{
    text-align:left;
}

.rightAlign{
    text-align:right;
}

Then used these styles as the value of "columnClasses" in my grid panel:

<h:panelGrid border="0" columnClasses="rightAlign,leftAlign,leftAlign" columns="3" id="gridPanel1"
                            style="left: 24px; top: 96px; position: absolute" width="600">

Then I placed a label, an input field and a message component to each row in the grid:


                        <h:panelGrid border="0" columnClasses="rightAlign,leftAlign,leftAlign" columns="3" id="gridPanel1"
                            style="left: 24px; top: 96px; position: absolute" width="600">
                            <webuijsf:label for="firstName" id="label1" text="First Name:"/>
                            <webuijsf:textField id="firstName"/>
                            <webuijsf:message for="firstName" id="message1" showDetail="false" showSummary="true"/>
                            <webuijsf:label for="middleName" id="label2" text="Middle Name:"/>
                            <webuijsf:textField id="middleName"/>
                            <webuijsf:message for="middleName" id="message2" showDetail="false" showSummary="true"/>
                            <webuijsf:label for="lastName" id="label3" text="Last Name:"/>
                            <webuijsf:textField id="lastName"/>
                            <webuijsf:message for="lastName" id="message3" showDetail="false" showSummary="true"/>
                            <webuijsf:label id="label4" text="Birth Date:"/>
                            <webuijsf:calendar id="calendar1"/>
                            <webuijsf:message for="calendar1" id="message4" showDetail="false" showSummary="true"/>
                        </h:panelGrid>

The three text input fields align properly, but the calendar component is slightly indented, I took some screenshots of the design page and the output (attached)

Any idea of how to make the calendar component align properly with other input fields?

Thanks,
David


--
http://ensode.net - A Guide to Java, Linux and Other Technology Topics
http://java-ee-5-glassfish.packtpub.com/ - Java EE 5 Development Using GlassFish Application Server
http://jasperreportsbook.packtpub.com - JasperReports For Java Developers