Discussion :

[CinePhil]

Bonjour.

J'ai évoqué dans le forum Zend Framework un problème concernant la mise en forme d'un formulaire.

En résumé, je souhaite la présentation suivante :

Label :
Description_________Textarea

Cette partie du formulaire est constituée à l'aide de ce code :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Description
        // TODO Agrandir sur plusieurs lignes
        $libelle_description = "
            <ul>
                <li>&Ecirc;tre pr&eacute;cis de fa&ccedil;on &agrave; conserver la meilleure information dans le    temps.</li>
                <li>Ne pas h&eacute;siter &agrave; bien situer le contexte.</li>
                <li>Pr&eacute;ciser si possible les causes de ce dysfonctionnement</li>
            </ul>
        ";
 
        $elementDecorators = array(array('ViewHelper'),
 
                                    array('Errors'),
                                    array('Description', array('tag' => 'span',
                                                                 'class' => 'description',
                                                                 'placement' => 'prepend')
                                    ),
                                    array('decorator' => array('2eme'=>'HtmlTag'), 
                                            'options' => array('tag' => 'dd',
                                                                'class' => 'dd_special')
                                    ),
                                    array('Label', array('tag' => 'dt'))
                            );
 
        $description = new Zend_Form_Element_Textarea('description', array('rows' => 10, 'class' => 'textarea'));
        $description    ->setLabel('Description :')
                        ->setRequired(true)
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty')
                        ->setDescription($libelle_description)
                        ->setDecorators($elementDecorators);

Mon CSS (auquel j'ai ajouté les background-color pour mieux voir où se place la description) :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
label 
{
    width: 300px;
    display: block;
    float: left;
}
 
.description
{
    display: block;
    clear: left;
    width: 250px;
    font-size: 80%;
    background-color: blue;
}
 
textarea
{
    //display: inline;
    clear: none;
    //float: left;
}
 
.dd_special
{
    display: block;
    background-color: orange;
}

Le code source de la page affaichée qui en résulte :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<dt><label for="description" class="required">Description :</label></dt>
<dd class="dd_special"><span class="description"><ul>
        		<li>&Ecirc;tre pr&eacute;cis de fa&ccedil;on &agrave; conserver la meilleure information dans le	temps.</li>
				<li>Ne pas h&eacute;siter &agrave; bien situer le contexte.</li>
				<li>Pr&eacute;ciser si possible les causes de ce dysfonctionnement</li>
			</ul></span>
 
<textarea name="description" id="description" rows="10" class="textarea" cols="80"></textarea></dd>

On voit que la description et la textarea sont dans la même <dd>.

Comme vous pouvez le voir dans le code CSS, j'ai essayé diverses combinaisons avec les display, les float, la class définie dans le textarea ou en entourant celle-ci dans un span...

Bref je ne sais plus quoi essayer et ma textarea se retrouve systématiquement sous la description au lieu de venir à côté (à droite).

J'en appelle donc aux spoécialistes du CSS après en avoir appelé sans succès aux spécialistes du Zend Framework.

[Malinaka]

Personnellement, j'ai eu le même soucis, et j'ai utilisé une solution certes peu gracieuse mais efficace en remplacant les balises dt/dd par des tr.
Ce tuto m'a bien servi: http://wiip.fr/content/zend-form-con...s-dt-et-les-dd