【问题标题】:How can I set the class for a <dt> element in a Zend_Form?如何为 Zend_Form 中的 <dt> 元素设置类?
【发布时间】:2011-02-21 02:23:43
【问题描述】:

我正在尝试为 Zend_Form 中的一组

元素设置样式的宽度。 有没有办法为 dt 元素设置一个类,所以最终结果会是这样的:
     <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>

【问题讨论】:

    标签: php css zend-form zend-decorators


    【解决方案1】:

    试试这样的:

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

    然后在你的 css 中,你不需要该表单的子元素的任何类或 id,你可以简单地为那个 dt 做这样的事情:

    form#ID_FOR_FORM ul li dt{
        margin:0;
        padding:0;
    }
    

    这就是我喜欢使用 css 的方式,制作良好的标记,然后我不需要类或 id,只需按照我在此示例中所做的操作即可。 :)

    【讨论】:

    • 嗨,这仍然对我没有帮助。这就是我当前在整个表单中设置 dt 元素宽度的方式。但是在表格的某个子部分中,我需要不同的宽度。因此,我最初的问题是关于如何为一组 dt 元素而不是整个表单设置样式。虽然感谢您的回答,但它并没有解决问题。
    【解决方案2】:

    我终于找到了解决方案——我需要将 dt,dd 元素包装在

    标记中并设置
    标记的类。然后我通过
    类为
    元素设置 css,如下所示:

    示例元素:

            $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();'
                                          )
                                    );
    

    然后,我将以下内容添加到我的 css 文件中:

    dl.xyz{
            margin: 0;
    }
    .xyz dt {
        width:97px;
        padding-left: 0px;
        margin-left: -15px;
    
    }
    

    这实现了我一直以来的目标——修改某些 dt 元素的样式,同时为整个表单保留一般/默认的

    样式。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-01
      • 1970-01-01
      • 2020-09-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多