Struts 2.1 error message breaks page html formatting

[E Robb]

Im having some issues where error messages are making the page formatting of forms look odd. It essentially offsets the label from the text field so the two do not line up together.

I've tried overriding the css and it does seem to resolve the issue. Is this something I need to make custom freemarker templates for or am I missing something really simple?

I know this is not the way I should confirm / change a password for now I am just trying to get the look and feel of the error pages correct.

The first screen shot shows how the page loads the second screen shot shows how the errors throw the label and field out of alignment. Ideally I would like the error message to start over the label table cell and go to the right instead of starting over the field cell of the html and going to the right.

Here is the CSS I have tried:

/*------Override struts labels ----------*/
.tdLabel{
	vertical-align:middle;
	white-space:nowrap;
	text-align:right
}
.label{
	vertical-align:middle;
	white-space:nowrap;
	text-align:right
}

Here is the actual form using theme="css_xhtml".

<s:form method="post"  name="security_update" action="security_update" theme="css_xhtml">
	<table width="70%" cellpadding="0" cellspacing="2">
		<tr>
			<td class="tdLabelDisplay"><s:text name="LBL_SECURITY_LOGIN"/>: </td>
			<td><b>TEST</b></td>
		</tr>
		<tr>
			<td class="tdLabel"><s:text name="LBL_SECURITY_OLDPASSWORD"/>: </td>
			<td><s:password name="oldpassword"/></td>
		</tr>
		<tr>
			<td class="tdLabel"><s:text name="LBL_SECURITY_PASSWORD"/>: </td>
			<td><s:password name="newpassword"/></td>
		</tr>
		<tr>
			<td class="tdLabel"><s:text name="LBL_SECURITY_PASSWORD_CONF"/>: </td>
			<td><s:password name="newpassword_confirm"/></td>
		</tr>	
		<tr>
			<td><s:submit /> </td>
			<td> </td>
		</tr>
	</table>
</s:form>

validation.xml:

<validators>
    <field name="oldpassword">
        <field-validator type="requiredstring">
            <message key="MSG_SECURITY_PWD_INCORRECT"/>
        </field-validator>
    </field>
     <field name="newpassword">
        <field-validator type="requiredstring">
            <message key="password.requiredString"/>
        </field-validator>
    </field>
    <field name="newpassword_confirm">
        <field-validator type="requiredstring">
            <message key="password.requiredString"/>
        </field-validator>
    </field>
</validators>

[vanlalhmangaiha khiangte]

Hi ,

I also got the same problem and had fixed it by following this tutorial http://www.mkyong.com/struts2/working-with-struts-2-theme-template/


Regards,
Vanlal

[E Robb]

It looks like my html usage of css_xhtml theme was not proper which was causing the issue where the error messages were causing the labels to misalign with the text fields. I have changed my html form to the following:

<s:form method="post"  name="security_update" action="security_update" theme="css_xhtml">
	<table width="80%" cellpadding="1" cellspacing="2">
		<tr>
			<td><s:label key="LBL_SECURITY_LOGIN" value="This value" labelposition="left"/></td>
		</tr>
		<tr>
			<td><s:password label="%{getText('LBL_SECURITY_OLDPASSWORD')}" labelposition="left"
							name="oldpassword" requiredposition="center"/></td>
		</tr>
		<tr>
			<td><s:password label="%{getText('LBL_SECURITY_PASSWORD')}" labelposition="left"
							name="newpassword"/></td>
		</tr>
		<tr>
			<td><s:password label="%{getText('LBL_SECURITY_PASSWORD_CONF')}" labelposition="left"
							name="newpassword_confirm"/></td>
		</tr>	
		<tr>
			<td><s:submit /> </td>
		</tr>
	</table>
</s:form>

Now my error messages are spanning the div correctly & the field labels are not misaligning vertically but it is changing the layout of the form. is some label I am missing to keep the elements from jumping from aligning center to aligning left?

[E Robb]

Was able to resolve the issue by over riding the css with the following. Now creates errors that produce a layout that is the same as the original display

.errorLabel {
	float:left;
    width:30%;
	white-space:nowrap;
	text-align:right;
	vertical-align:bottom;

}
.errorMessage{
	text-align:center;
}

[ss bb]

Hi I am new to code ranch

I have problem with alignment using <s:form theme="css_xhtml">

Here is my code in jsp

My style,

.errorLabel {  
    float:left;  
    text-align:left;  
    vertical-align:bottom;  
}  
.errorMessage{  
	float: left;
    text-align:left;
}  


My jsp code,

	<s:form action="loginValidation" theme="css_xhtml">
				<table width="990px">
					<tr>
						<td width="60px">Name:</td><td align="left"><s:textfield cssStyle="float: left;" name="name"></s:textfield></td>
					</tr>
					<tr>
						<td width="60px">Password:</td><td align="left"><s:textfield cssStyle="float: left;" name="password"></s:textfield></td>
					</tr>
					<tr>
						<td width="60px">Email:</td><td align="left"><s:textfield  cssStyle="float: left;" name="userEmail"></s:textfield></td>
					</tr>										
				</table>
				<sx:submit cssStyle="float: left;" validate="true" targets="successful"></sx:submit>
	</s:form>

Here are images to describe my problem

1) I have a form here.


2) When I submit, the <s:textfield> move to the right


3) This is what I want instead

[ss bb]

Problem solved. But in the first place there isn't any problem >.<

The reason why the alignment is weird is because of my IDE's default browser.