I don't think anyone has tried to do what you're doing. If your
solution seems to work, I say run with it. I sometimes get frustrated
by Struts 2's themes because they add so many extra DIVs and such. On
a lot of projects, I'm simply reverted to the simple theme and added
HTML manually for layout. I've also thought of moving to Uni-Form
(http://dnevnikeklektika.com/uni-form/).
Matt
On Tue, Apr 8, 2008 at 10:59 PM, Richard M <[EMAIL PROTECTED]> wrote:
>
> 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]
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
