[Problème] Ajouter un champ aux listes de fiches de contact

[ashken]

Bonjour à tous.

Je cherche a ajouter les informations diverses dans la vue en liste des fiches de contact.
En farfouillant j'ai trouvé quelques tutos s'en rapprochant, mais j'y arrive pas pour les infos :b
j'ai copié default_items.php, default_children.php et default.xml dans mon template, j'ai bidouillé mais ca marche pas super.

Dans l'idéal je voudrais pouvoir choisir d'ajouter ou non le champ "infos diverses" dans la vue en liste, et ensuite qu'il vienne se caler a droite du tableau. J'ai réussi a poser le contenu des infos diverses a cet endroit, mais ca deborde de la div, comme si les li de la liste avaient une hauteur fixe. (cf image ci dessous) . De plus aucune idée de comment ajouter le choix d'afficher ou non les infos diverses a cet endroit.

J’espère avoir été suffisamment clair, voici l'image pour aider un peu



Merci d'avance pour votre aide

[webcrea]

Re : Ajouter un champ aux listes de fiches de contact

Tu es sur la bonne voie, utiliser une surcharge en copiant les default. Pas besoin de copier le xml. Et pour la hauteur de ligne c'est probablement ce que tu avances : hauteur forcée au niveau de la css. Pour trouver l'instruction : clique-droit sur la ligne et examine le code ou tout simplement, change la classe de la <li>

[ashken]

Re : Ajouter un champ aux listes de fiches de contact

Bonjour merci de ta réponse

Justement je capte pas pourquoi mon li depasse de la div, je vois rien en css qui force la hauteur.

Voila le bout de code :

<ul class="category list-striped">
<li class="cat-list-row0">
<li class="cat-list-row1">
<li class="test3 pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur non massa vitae consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod lectus vel sollicitudin lacinia. Maecenas quis consectetur dolor. Sed vehicula feugiat justo. Cras non ipsum sodales tortor lobortis aliquam vel et urna. Vivamus venenatis mi et pharetra euismod. Sed sapien sem, eleifend quis tempor vitae, aliquam quis massa. Donec vel nisi ligula. Nunc sapien sapien, pellentesque dignissim justo quis, accumsan fringilla ante. Vivamus vel posuere quam. Nullam venenatis sapien ut lorem aliquam sagittis.</p>
</li>

et en CSS j'ai

.test3.pull-right {
    width: 50%;
}
.pull-right {
    float: right;
}

et rien de spécial sur les ul et li.

[lefabdu51]

Re : Ajouter un champ aux listes de fiches de contact

cela peut aussi etre du a un probleme de z-index. A verifier
second test a faire
[CSS]
.test3.pull-right {
width: 50%;
height:auto;
}
[/CSS]

et ce que tu peut tester aussi c est de modifer la hauteur de ligne (line-height), car si je me rappeles bien, c est ce qui determines la hauteur des li

[Rajoz]

Re : Ajouter un champ aux listes de fiches de contact

Bonjour ashken,

Le CSS "float: right;" sort du flux d'affichage le texte "Lorem ipsum..." et le positionne à droite. Voir http://www.w3schools.com/css/css_float.asp

Les autres éléments restent dans le flux d'affichage et ne tiennent donc pas compte de ce qu'il y a dans le "float: right;". C'est pour cela que la ligne suivante "Sous catégories" se colle directement sous la ligne du contact.

Pour éviter que les autres éléments ne tiennent pas compte du "float: right;" il faut utiliser "clear: both;" avant la ligne "Sous catégories". Voir http://www.w3schools.com/cssref/pr_class_clear.asp et en particulier l'exemple http://www.w3schools.com/cssref/tryi...ss_class-clear

En regardant le code (très résumé) de default_items.php on a pour chaque contact de la liste :

<li class="cat-list-row<?php echo $i % 2; ?>" >
    <span class="pull-right">
        groupe d'éléments flottants à droite : téléphone, mobile et fax
    </span>
    <p>
        groupe affiché à gauche : nom, fonction email, ville, état, pays
    </p>
<li>

Le groupe de droite est moins haut que le <li>, il ne déborde donc pas. Si l'on ajoute les informations diverses, il devient plus haut et déborde sur la suite.

Pour corriger ces "débordements" il faut ajouter un peu de CSS, j'ai choisi de le faire via des classes Bootstrap (ajouts en rouge) :

<li class="[COLOR=#ff0000]clearfix[/COLOR] cat-list-row<?php echo $i % 2; ?>" >
    <span class="pull-right [COLOR=#ff0000]span6[/COLOR]">
        groupe d'éléments flottants à droite : téléphone, mobile et fax
[COLOR=#ff0000]        <?php if (!empty($item->misc)) : ?>
            <?php echo 'Informations diverses :<br />' . $item->misc; ?>
        <?php endif; ?>
[/COLOR]    </span>
    <p>
        groupe affiché à gauche : nom, fonction email, ville, état, pays
    </p>
<li>

Notes :

• clearfix : fait un "clear: both;" après le <li>...</li>, c'est lui qui va empêcher le débordement sur le contact suivant. C'est comme si on avait mis <div style="clear: both;"></div> juste après le </li>
• span6 : définit la largeur du groupe de droite <span></span>. La largeur des spanX de Bootstrap va de 0 à 12. Un span6 correspond à width: 50%; (6/12).
• $item->misc : c'est le contenu des informations diverses qui sont affichées si elles ne sont pas vides. Pour un site multilingue, il faudrait mettre à la place du texte "Informations diverses :" un JTEXT:: avec la chaîne de langue correspondante dans la surcharge de langue.

Amicalement,
Rajoz