-- 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
