Matt, thank you as always. By "... simply reverted to HTML manually for layout." do you mean you end up using table to position fields and controls?
And yes, I took a look at Uni-Form - it looks pretty neat and could probably be integrated with Struts2's simple theme pretty easily. I also took a look at YUI, based on one of your earlier posts. That is also neat, but a bit overwhelming given you would have to re-develop the frameworks. mraible wrote: > > 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] > > > -- View this message in context: http://www.nabble.com/CSS-Framework-and-side-by-side-fields-tp16518269s2369p16579990.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]
