Bump. Does anybody have any insight/input at all?
Richard M wrote:
>
> 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-tp16518269s2369p16579414.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]
