Pardon the rant, those who are interested in the more "useful" part of my reply, drop down to the end.
[rant] I have to agree with the notion that styling dl's are often a PITA. I find it much easier to work with just the input and label wrapped in a div. Floating is still necessary there too, but the div makes it much easier to style the label+input as a single unit. Yes, it's probably possible to do what you want with definition lists, it's just that you have to jump through so many hoops to get the styling you want. The example you gave is for the bare minimum of styling. Start adding background colours, borders, etc, and pretty soon, things start falling apart. For most (if not all) my forms, I've resorted to writing the markup by hand, and just render the decorators I want manually. If it's really true that definition lists are a flexible solution making styling trivial, why is it so hard to find good examples of forms made with them? Robert Basic's example and pretty much all other examples I've found of definition list based forms are, well... basic. Just do a search for "styling defintion list based forms" and you'll see what I mean [1]. For a quick non-scientfic survey using the forms here: http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ 7 no wrappers 6 div 3 p 3 li 2 tables 1 ol Nearly 2/3rds of them use single element wrappers (div, p, li, ol), and 1/3 used no wrapper elements at all (aside from fieldsets). Out of all of them, only one used a div based solution that behaved like definition lists, but used some crazy javascript to absolutely position all the elements. The general conclusion I would draw from this is that the techniques used for styling the no wrapper based forms, should work to a degree for dl based forms. However, you're basically not much better off than you were if all you had were the basic form elements to work with. You've gained an extra wrapper around each element that you can style separately, but you're now limited with what content you can include, and how, because of things being wrapped in a dl. [/rant] Now that I've got that off my chest, how about some solid resources for those who are struggling with definition lists? Robert Basic's example should be a Zend Form styling 101. But we need resources that go beyond positioning labels on the left, inputs on the right. [1] : One of the results (http://www.maxdesign.com.au/articles/definition/) was quite good, and is one of the best examples I've found so far, but only covers defintion lists in general. Others that look at DL based forms: http://clagnut.com/blog/241/ http://www.aaronwitherow.co.uk/blog/comments/styling_forms_with_definition_lists/ If you've got others, please share. Cheers, David weierophinney wrote: > > -- Mike Wright <[email protected]> wrote > (on Tuesday, 16 November 2010, 08:56 AM -0800): >> Steve Rayner wrote: >> > I'm trying to get rid of the default decorators in zend form. >> > I don't want the dl, dt & dd tags. >> > >> <snip/> >> > >> > is there a simple way to turn off this feature for all forms. I'm >> > finding that these tags are making my css more complicated than it >> > needs to be. >> >> I also hated the <dt/><dd/> paradigm because of the difficulty I had >> applying CSS. > > I'm sorry, but I really have a hard time believing this. There are a > variety of snippets showing how you can style these tags in a variety of > ways -- both stacking on top of each other as well as side-by-side. A > quick google search for "style zend_form dl dt tags" brings up one right > away: > > * http://robertbasic.com/blog/styling-the-default-zend_form-layout/ > > and there are quite a few more in the results on that first page. The > trick is using CSS floats if you want them side-by-side, and requires > only two CSS definitions to accomplish: > > form dl dt { > clear: both; > float: left; > width: 10em; /* or whatever you want it to be */ > } > > form dl dd { > margin-left: 12em; /* 2em more than the dt width */ > } > > (Some examples float both the dt and dd, within a fixed-width form.) > > It was precisely the *ease* with which these tags could be styled that > tipped the balance in favor of using these tags. > > The point is: don't knock the default markup as being un-stylable. You > should only ever need to change the markup if you need to provide an > alternate semantic structure, or if you are working with a designer who > has spec'd out an alternate markup structure. > >> Now this doesn't answer your question but does show how I solved the >> problem of having to style <dt> and <dd> tags and keep them related: >> I wrap each <dt/><dd/> in a <dl></dl> which keeps the label and form >> element together and only requires positioning one element: the >> <dl/>. >> >> Here's my method. >> >> public function setFormDecorators(Zend_Form $form) >> { >> $form->setDecorators(array( >> array('FormElements', array( >> 'separator' => "</dl>\n<dl>" >> )), >> array('myDtDdWrapper' => 'DtDdWrapper'), >> array( >> array('myHtmlTag' => 'HtmlTag'), >> array('tag' => 'dl') >> ), >> 'Fieldset', >> 'DtDdWrapper', >> array('HtmlTag', array( >> 'tag' => 'dl', >> 'class' => 'zend_form' >> )), >> 'Form' >> )); >> return;label { >> >> } >> >> This was a cut from a vi edit session and copied here. I hope I >> didn't introduce any errors when I did that. >> >> To further complete the illusion that the labels and form elements >> are atomic the label is positioned *over* and *within* the form >> input elements. Here's my CSS. >> >> body {position: relative;} >> input, >> label { >> position: relative; >> display: block; >> } >> label { >> z-index: 2; >> top: 8pt; >> left: 4pt; >> font-family: sans-serif; >> font-size: 5pt; >> font-weight: bold; >> } >> input { >> padding: 7pt 0 0 7pt; >> font-size: 10pt; >> } >> >> Since I figured that out I haven't looked back. Hope it is a >> solution that works for you. >> >> Mike Wright >> > > -- > Matthew Weier O'Phinney > Project Lead | [email protected] > Zend Framework | http://framework.zend.com/ > PGP key: http://framework.zend.com/zf-matthew-pgp-key.asc > > -- View this message in context: http://zend-framework-community.634137.n4.nabble.com/Form-default-decorators-tp3043858p3048083.html Sent from the Zend Framework mailing list archive at Nabble.com.
