I have finally accepted the orientation towards left-aligned labels over form
fields - and find I do like it can see its easier for a user to take in the
form visually. Plus the style sheets allow the window to be resized without
breaking visually. CSS and visual presentation is not my forte, but I'm
trying to do this "right" and get better at it.
But occasionally there are times you need side-by-side fields - or the form
just gets too long. Appfuse does this in a few places - such as First and
Last name on the userForm.jsp and signup.jsp pages.
BTW, I am using Appfuse 2.0.1 with Struts2 and Hibernate. It seems to do
this by overriding the theme to "xhtml" from "css_xhtml". Then you put your
own list item tags around the two or three fields you want on the same line.
Like this:
<li>
<div>
<div class="left">
<s:textfield key="user.firstName" theme="xhtml"
required="true" cssClass="text medium"/>
</div>
<div>
<s:textfield key="user.lastName" theme="xhtml"
required="true" cssClass="text medium"/>
</div>
</div>
</li>
But when we needed to add a third field - middle name - things broke. No
matter how I adjusted and played with the wrapping div's and classes it
would not play nice. It would wrap last name to a second line on Firefox and
leave it on the same line on IE7. Adding tooltips using the Struts2
"tooltip" attribute broke things further by making the last field on the
line shift up about a quarter of a line - it looked really icky.
So here's what I ended up doing - that so far seems to work OK:
1. Changed theme.css to include layout-navtop-1col.css to give me a bit more
width.
2. Eliminated all extraneous divs, other than those generated by the Struts
s: tags.
3. For lines with a single field, just let the Struts css_xhtml tag handle
everything.
4. To get a vertical grouping of fields, I use an additional embedded UL
tag, making an indented sublist.
5. For lines with multiple fields, like the the Appfuse userForm.jsp, I
manually added the list item tags, ... AND (Cringe) used a single row table
with a cell for each field.
Here's an example, with heading "Name" above the horizontal grouping of the
three name parts, each with their own label above the field:
<li>
<strong><label class="desc"><fmt:message
key="user.name"/></label></strong>
<table class="tableFieldRow"><tr><td>
<s:textfield key="user.firstName" maxLength="32" theme="xhtml"
required="true" cssClass="text firstName"
tooltip="%{getText('user.firstName.tooltip')}"/>
</td><td>
<s:textfield key="user.middleName" maxLength="32" theme="xhtml"
required="fals" cssClass="text middleName"
tooltip="%{getText('user.middleName.tooltip')}"/>
</td><td>
<s:textfield key="user.lastName" maxLength="32" theme="xhtml"
required="true" cssClass="text lastName"
tooltip="%{getText('user.lastName.tooltip')}"/>
</td></tr></table>
</li>
And here's and example of a vertical grouping, with horizontal grouping on
some fields:
<li>
<strong><fmt:message key="user.address"/></strong>
<ul>
<s:textfield key="user.address.address" theme="css_xhtml"
cssClass="text large" labelposition="top"
tooltip="%{getText('user.address.address.tooltip')}"/>
<s:textfield key="user.address.address2" theme="css_xhtml"
cssClass="text large" labelposition="top"
tooltip="%{getText('user.address.address2.tooltip')}"/>
<li>
<table class="tableFieldRow"><tr><td>
<s:textfield key="user.address.city" theme="xhtml"
required="true" cssClass="text medium"
labelposition="top"
tooltip="%{getText('user.address.city.tooltip')}"/>
</td><td>
<s:textfield key="user.address.postalCode" theme="xhtml"
required="true" cssClass="text medium"
labelposition="top"
tooltip="%{getText('user.address.postalCode.tooltip')}"/>
</td></tr></table>
</li>
<li>
<table class="tableFieldRow"><tr><td>
<s:select headerValue="%{getText('user.address.province')}"
headerKey="-1" emptyOption="true" theme="xhtml" name="user.address.province"
list="stateList" listKey="value" listValue="label"
key="user.address.province"labelposition="top"
tooltip="%{getText('user.address.province.tooltip')}"></s:select>
</td><td>
<s:select headerValue="%{getText('user.address.country')}"
headerKey="-1" emptyOption="true" theme="xhtml" name="user.address.country"
list="countryList" listKey="value" listValue="label"
key="user.address.country"labelposition="top"
tooltip="%{getText('user.address.country.tooltip')}"></s:select>
</td></tr></table>
</li>
</ul>
</li>
Obviously its a little messy, but a custom tag can clean it up a bit.
So far it seems to behave well for IE7, FireFox on Windows and Mac and
Safari on Mac.
Questions:
1. Any real downsides to this? I felt a bit disappointed having to revert to
this, albeit limited, use of table tags.
2. Any alternate ways to achieve the control I'm looking for?
Thanks for any and all feedback and suggestions!
--
View this message in context:
http://www.nabble.com/CSS-Framework-and-side-by-side-fields-tp16518269s2369p16518269.html
Sent from the AppFuse - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
