Zend FR

CinePhil · 06-04-2010 12:18:54

Bonjour,

J'ai deux petits soucis de mise en forme.

1) Problème de CSS ?
Code de la vue :

Code:

<span class="label_court">Date d'émission :</span>
<span class="valeur_date">
    <?php echo FonctionsUtiles::Change_formatDate($this->escape($this->afficheDysfonctionnement->DYS_Date_Emission), 'fr');?>
</span>
<br />
<span class="label_court">Émetteur :</span>
<span class="valeur_nom">
    <?php echo $this->escape($this->afficheDysfonctionnement->PRS_Nom);?>&nbsp;
    <?php echo $this->escape($this->afficheDysfonctionnement->PRS_Prenom);?>
</span>
<br />

Code CSS :

Code:

.label_court
{
    width: 30%;
    float: left;
    margin-top: 3px;
}

.valeur_date
{
    color: blue;
    float: left;
    width: 9%;
    background-color: #DDDDDD;    
    margin-top: 3px;
    padding-left: 1px;
}

.valeur_nom
{
    color: blue;
    float: left;
    width: 20%;
    background-color: #DDDDDD;
    margin-top: 3px;
    padding-left: 1px;
}

Le label "Émetteur :" se retrouve à la deuxième ligne (ça c'est normal) à droite de la valeur_date au lieu d'être au bord gauche de l'écran. Et la valeur_nom est décalée d'autant !

Dated'émission : 01/01/2010
--décalage jusque là------->Émetteur : Philippe Leménager

2) Boutons d'otpion sur deux lignes
Code du formulaire :

Code:

// ============== Action de progrès à déclencher ? ======================
        $option_action_progres = new Zend_Form_Element_Radio('option_action_progres');
        $option_action_progres    ->addMultiOption(1, 'Oui')
                                ->addMultiOption(2, 'Non')
                                ->setValue(1)
                                ->setLabel("Pensez-vous nécessaire d'engager une action de progrès ?");

Code de la vue :

Code:

    <?php echo $this->form->option_action_progres ;?>

Le label étant long, se retrouve sur deux lignes dans sa boîte (ça c'est normal). La première option "Oui" est bien positionnée à droite de la première ligne du label mais la deuxième option "Non" est à la ligne en dessous et décalée à droite !

Quelqu'un a une idée ?

Dernière modification par CinePhil (08-04-2010 10:54:21)

Zartan · 06-04-2010 13:15:25

Bonjour, j'avais eu un problème similaire, et je l'avais résolu avec les css.

J'ai donc créé une classe css radiobuttons qui m'a permis de positionner mes boutons correctement.

Code:

    protected $radioDecorators = array(
        'Label',
       'ViewHelper',
        array(array('data' => 'HtmlTag'), array('tag' => 'li', 'class' => 'radiobuttons')),
        );

Code:

/* =============================== radiobuttons class */
.radiobuttons input {
    display: inline;
    }
.radiobuttons  label {
    display: block;
    }

Suivant ce que l'on veut faire on doit parfois utiliser également clear. C'est en tous cas un problème de CSS.

CinePhil · 08-04-2010 10:29:07

Merci mais ça ne marche pas.
J'ai bien sûr ajouté un setDecorator dans la description du fromulaire :

Code:

        // ============== Action de progrès à déclencher ? ======================
        $radioDecorators = array(    'Label',
                                    'ViewHelper',
                                    array(array('data' => 'HtmlTag'), 
                                            array('tag' => 'li', 'class' => 'radiobuttons')
                                        ),
                                );
        
        $option_action_progres = new Zend_Form_Element_Radio('option_action_progres');
        $option_action_progres    ->addMultiOption(1, 'Oui')
                                ->addMultiOption(2, 'Non')
                                ->setValue(1)
                                ->setLabel("Pensez-vous nécessaire d'engager une action de progrès ?")
                                ->setDecorators($radioDecorators);

Mais en fait je vois que dans le code HTML généré, il y a un <label> qui entoure les radiobuttons, lesquels sont séparés par un <br /> :

Code:

<dt>
  <label for="option_action_progres" class="optional">Pensez-vous nécessaire d'engager une action de progrès ?</label>
</dt>
<dd>
  <label for="option_action_progres-1">
    <input type="radio" name="option_action_progres" id="option_action_progres-1" value="1" checked="checked">
    Oui
  </label>
  <br />
  <label for="option_action_progres-2">
    <input type="radio" name="option_action_progres" id="option_action_progres-2" value="2">
    Non
  </label>
</dd>

Il doit falloir bidouiller un peu plus le décorateur des radiobuttons !

EDIT :
Pour afficher les radioButtons en ligne, j'ai trouvé une autre méthode beaucoup plus simple. Il existe une méthode setSeparator dans la classe Zend_Form_Element_Multi :

Code:

        $option_action_progres = new Zend_Form_Element_Radio('option_action_progres');
        $option_action_progres    ->addMultiOption(1, 'Oui')
                                ->addMultiOption(2, 'Non')
                                ->setValue(2)
                                ->setLabel("Pensez-vous nécessaire d'engager une action de progrès ?")
                                ->setSeparator('&nbsp;');

Il reste le premier problème avec les champs texte non superposés (voir mon premier message).

Dernière modification par CinePhil (08-04-2010 10:51:40)

Zend FR

#1 06-04-2010 12:18:54

Quelques soucis de mise en forme...

Code:

Code:

Code:

Code:

#2 06-04-2010 13:15:25

Re: Quelques soucis de mise en forme...

Code:

Code:

#3 08-04-2010 10:29:07

Re: Quelques soucis de mise en forme...

Code:

Code:

Code:

Pied de page des forums