CSS et formulaire Zend Framework
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 :
Citation:
Label :
Description_________Textarea
Cette partie du formulaire est constituée à l'aide de ce code :
Code:
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>Être précis de façon à conserver la meilleure information dans le temps.</li>
<li>Ne pas hésiter à bien situer le contexte.</li>
<li>Pré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:
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:
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>Être précis de façon à conserver la meilleure information dans le temps.</li>
<li>Ne pas hésiter à bien situer le contexte.</li>
<li>Pré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.