How can I set a class for a <dt> element in Zend_Form?
I am trying to set the style width for a group from <dt> in Zend_Form. Is there a way to set a class for the dt element so the end result would be something like this:
<dt id="name-label" class="xyz" > // trying to add the 'class="xyz"
<label class="required" for="name">Name:</label>
</dt>
<dd id="name-element">
<input type="text" maxlength="255" size="30" value="" id="name" name="name">
</dd>
a source to share
Finally I found a solution - I needed to wrap the dt, dd elements in <dl> and set the <dl> class. then I set the css for the <dt> via the <dl> element like so:
Sample element:
$question = new Zend_Form_Element_TextArea('question'.$i);
$question->setLabel('Question '.$i.':')
->setAttrib('rows', 10)->setAttrib('cols', 40)->setAttrib('class', 'richtexteditor')
->addFilter('StringTrim')
->addDecorator('HtmlTag', array('tag' => 'dd','id'=> 'question'.$i.'-element',
'style'=>'width:350px;max-height:202px;'
)
)
->addDecorator(array('dlTag'=>'HtmlTag'), array('tag' => 'dl','class'=> 'xyz')) //added this line
->addDecorator('Errors', array('class'=>'custom-errors'))
->setOptions(array('onkeyup'=>'textCounter();',
'onkeydown'=>'textCounter();'
)
);
Then I added the following to the css file:
dl.xyz{
margin: 0;
}
.xyz dt {
width:97px;
padding-left: 0px;
margin-left: -15px;
}
this achieves what I've been striving for all along - changing the style of some dt elements while keeping the / dt> common for the entire form.
a source to share
Try something like this:
<form id='ID_FOR_FORM' method="post" action="">
<ul>
<li>
<dt><label for="your-name">Your Name:</label></dt>
<dd><input type="text" size="40" id="your-name" value="" name="your-name" /></dd>
</li>
<li>
<dd><input type="submit" type='button' value="Send" /></dd>
</li>
</ul>
</form>
Then in your css you don't need any classes or id for the children of that form, you can just go something like this for this dt:
form#ID_FOR_FORM ul li dt{
margin:0;
padding:0;
}
This is how I like to work with css, do good markup, and then I don't need classes or ids, just do what I did in this example. :)
a source to share