On Tue, Apr 8, 2008 at 11:43 PM, Richard M <[EMAIL PROTECTED]> wrote: > > 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?
No, I still use CSS to do layouts if I can. I mean that I don't use the css_xhtml them that adds all the divs, labels and such around fields. Matt > > 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] > > --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
