[PrimeFaces / pe:timeline] Problème d'affichage des event d'une timeline

**GDS_Strou** · 07/07/2015, 14h32

Bonjour,

Je travail sur une timeline des extensions de primefaces et je rencontre un petit soucis sur l'affichage de mes event.
Je m'explique et joins une photo ci-dessous pour que ce soit plus explicite.

J'ajoute des event dans ma timeline avec cette ligne de code :

Code :

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

event = new TimelineEvent(uneDispo, debut, fin, true, libelle, valide);

- uneDispo correspond à un objet de ma classe Dispo
- debut est la date de début de l'event
- fin est la date de fin de l'event
- true pour editable
- libelle est le nom de l'entete de ligne (par exemple 2/4)
- valide est pour dire que je vais chercher le div.valide dans mon css.

J'en viens à mon problème, dans mes event il y a le toString de mes objets qui s'affiche. (voir photo 1).
Mais pour mon projet, je ne dois rien afficher dans mes event, sauf dans les event qui sont blanc.

J'ai donc tenter de retourner un toString = "" pour mes Dispo qui ne doivent rien afficher.
Cela résout en partie mon problème mais du coup la hauteur de mes event est divisé par 2 (voir photo 2).

Je ne sais pas comment faire pour ce problème, une aide m'aiderai beaucoup.

Ci dessous la photo :
Nom : timeline1.png
Affichages : 1046
Taille : 121,7 Ko

Nom : timeline1.png
Affichages : 1046
Taille : 121,7 Ko

Voici le fichier CSS de ma timeline :

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
@CHARSET "ISO-8859-1";
/* Custom styles for the TIMELINE */
div.timeline-frame {
    border-color: #9BCC60;
    border-radius: 5px;
}
 
div.timeline-axis {
    border-color: #9BCC60;
    background-color: #9BCC60;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9BCC60', endColorstr='#9BCC60') alpha(opacity = 100);
    background: -webkit-gradient(linear, left top, left bottom, from(#9BCC60), to(#9BCC60));
    background: -moz-linear-gradient(top,  #9BCC60,  #9BCC60);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}
 
div.timeline-groups-axis {
    border-color: #9BCC60;height: 1000;
}
 
div.timeline-groups-axis-onleft {
    border-style: none solid none none;
}
 
div.timeline-axis-text {
    color: white;
}
 
div.timeline-event {
    color: black !important;
    border-radius: 2px !important;
}
 
div.timeline-event-content {
    padding: 5px;
    text-shadow: none;
}
 
div.cree {
    background: #ED7F10 none !important;  /* orange FFA500*/
    border-color: #cc8100 !important;     /* orange cc8100*/
}
 
div.test {
    background: #F03030 none !important;  /* red F03030*/
    border-color: #bd2828 !important;     /* red bd2828*/
}
 
div.valide {
    background: #1AA11A none !important;  /* green 1AA11A*/
    border-color: #136e13 !important;     /* green 136e13*/
}
 
div.terrain {
    background: #FFFFFF none !important;  /* blanc */
    border-color: #CECECE !important;     /* blanc */
}
 
div.timeline-event-selected {
    background: #BECEFE none !important;
    border-color: #97B0F8 !important;
}
 
.ligneTab{
       display: table-cell;
}
.celluleLibTab{
       width: 150px;
       height: 30px;
}
.celluleEscTab{
       width: 80px;
       height: 30px;
}

**Lacunasaurus** · 24/07/2015, 11h41

Bonjour GDS_Strou.

As tu essayer de fixer une taille minimale à ta ligne et de prendre tout l'espace disponible pour ta case ?

Il va falloir le code complet HTML + CSS de ta page pour pouvoir creuser un peu plus

**GDS_Strou** · 04/09/2015, 10h10

Bonjour,
Merci pour votre réponse, pour le code de la page html, le voici ci-dessous. Le code du CSS est toujours disponible dans le 1er post.
Merci pour votre aide.

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:pe="http://primefaces.org/ui/extensions">
 
<ui:composition template="../../WEB-INF/templates/standard.xhtml">
 
       <ui:define name="content">
 
             <script type="text/javascript">
                    PrimeFacesExt.locales.Timeline['fr'] = {
                        'MONTHS': ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                        'MONTHS_SHORT': ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
                           'DAYS': ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
                           'DAYS_SHORT': ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
                        'ZOOM_IN': "Zoomer",
                        'ZOOM_OUT': "Dézoomer",
                        'MOVE_LEFT': "Déplacer à gauche",
                        'MOVE_RIGHT': "Déplacer à droite",
                        'NEW': "Nouveau",
                        'CREATE_NEW_EVENT': "Créer un nouvel évènement"
                    };
             </script>
 
 
             <h:form id="formTableauBord">                 
                    <p:fieldset legend="Programmation">
 
                           <pe:timeline id="timeline" value="#{tableauDeBordBean.model}"
                          editable="true" selectable="true" eventMargin="12" eventMarginAxis="0"
                          locale="fr" zoomMin="10000000" zoomMax="606000000"
                          start="#{tableauDeBordBean.start}"
                          end="#{tableauDeBordBean.end}"
                          showNavigation="true" showButtonNew="false" widgetVar="wvTimeline"
                          axisOnTop="true" stackEvents="false" themable="false" groupsOrder="false" var="objetSelectionnee">  
 
                                 <p:ajax event="edit" update=":infosTerrain"  listener="#{tableauDeBordBean.onEdit}" />  
                          </pe:timeline>                  
 
                    </p:fieldset>
             </h:form>
 
</ui:define>
</ui:composition>
</html>

[PrimeFaces / pe:timeline] Problème d'affichage des event d'une timeline

JSF Java

Discussions similaires

Partager

Partager