Discussion :

[meriyem]

bonjour

est ce qu'il y a moyen d'ajouter un scrollBar vertical à un modal panel ??

merci

[Sniper37]

bonjour

est ce qu'il y a moyen d'ajouter un scrollBar vertical à un modal panel ??

merci

ouiii tu peux mettre le contenu dans un div et lui donner le style la capacité de scroller:

Code :

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

1
2
3
.scrollable_body {
overflow:auto;
}

[meriyem]

je viens d'essayer ce que tu m'a proposé mais ça n'a pas marché.

je crois que c'est à cause du contenu de mon ModalPanel parceque j'ai dedans plusieurs datatable

tu crois que c'est ça??

[Sniper37]

tu peux montrer le code..

[meriyem]

bonjour

voici le code :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<rich:modalPanel id="panelDetail" width="600" height="500">
<div class="scrolling_body">
        <core:facet name="header">
            <html:panelGroup>
                <html:outputText value="Détail du marché"></html:outputText>
            </html:panelGroup>
        </core:facet>
        <core:facet name="controls">
            <html:panelGroup>
                <html:graphicImage value="/images/close.gif" styleClass="hidelink" id="hidelink1"/>
                <rich:componentControl for="panelDetail" attachTo="hidelink1" operation="hide" event="onclick"/>
            </html:panelGroup>
        </core:facet>
         <html:form>
        <html:panelGrid columns="1">
        <a4j:outputPanel ajaxRendered="true">
 
        <html:outputLabel value="Nom " style="color:green;font-weight:bold;font-size:10pt" />
        <html:outputLabel value=": #{gestionChantiers.selectedM.nommarche}" style="font-weight:bold;font-size:8pt"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <html:outputLabel value="Client " style="color:green;font-weight:bold;font-size:10pt" />
        <html:outputLabel value=": #{gestionChantiers.selectedM.client}" style="font-weight:bold;font-size:8pt"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
       	<html:outputLabel value="Date de soumission " style="color:green;font-weight:bold;font-size:10pt" />
        <html:outputLabel value=": #{gestionChantiers.selectedM.dateSoumission}" style="font-weight:bold;font-size:8pt"/>
        <br/><br/>
        <html:dataTable id="tableCh" value="#{gestionChantiers.chantier}" var="ch" rules="all" cellspacing="4" width="80%" rowClasses="row1,row2"
headerClass="heading">
 
        <html:column>
		<core:facet name="header" >
		<html:outputLabel value="Nom du chantier" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText value="#{ch.nomChantier}" style="font-weight:bold;font-size:8pt" />
		</html:column>
 
		 <html:column>
		<core:facet name="header" >
		<html:outputLabel value="Adresse" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText value="#{ch.adresse}" style="font-weight:bold;font-size:8pt" />
		</html:column>
 
		<html:column>
		<core:facet name="header" >
		<html:outputLabel value="Chef du chantier" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText  value="#{ch.chefChantier}" style="font-weight:bold;font-size:8pt" />
		</html:column>
        </html:dataTable>
 
        <br/><br/>
        <html:dataTable id="tableC" value="#{gestionChantiers.infocaution}" var="c" rules="all" cellspacing="4" width="80%" rowClasses="row1,row2"
headerClass="heading">
 
        <html:column>
		<core:facet name="header" >
		<html:outputLabel value="Montant de caution" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText value="#{c.montant}" style="font-weight:bold;font-size:8pt" />
		</html:column>
 
		 <html:column>
		<core:facet name="header" >
		<html:outputLabel value="Banque" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText value="#{c.banque}" style="font-weight:bold;font-size:8pt" />
		</html:column>
 
		<html:column>
		<core:facet name="header" >
		<html:outputLabel value="Date fin de caution" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText  value="#{c.dateFin}" style="font-weight:bold;font-size:8pt" />
		</html:column>
        </html:dataTable>
 
        <br/><br/>
        <html:dataTable id="tableD" value="#{gestionChantiers.infodecompte}" var="d" rules="all" cellspacing="4" width="80%" rowClasses="row1,row2"
headerClass="heading">
 
        <html:column>
		<core:facet name="header" >
		<html:outputLabel value="Montant décompte" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText  value="#{d.montant} " style="font-weight:bold;font-size:8pt" />
		</html:column>
 
        <html:column>
		<core:facet name="header" >
		<html:outputLabel value="Date du décompte" style="color:green;font-weight:bold;font-size:10pt"/>
		</core:facet>
		<html:outputText  value="#{d.dateDecomp} " style="font-weight:bold;font-size:8pt" />
		</html:column>
       </html:dataTable>
 
 
        </a4j:outputPanel>
        </html:panelGrid>
        	</html:form>
</div>
</rich:modalPanel>

[Sniper37]

essaye de mettre le div après les facets de controle:

Code :

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

1
2
3
4
5
6
<html:form>
        <html:panelGrid columns="1">
<div>
...
</div>
..

[meriyem]

ça ne marche pas non plus !!

j'ai pensé au lieu de mettre un scrollbar je vais changer les datatable en scrollableDataTable pour résoudre mon problème

[Sniper37]

ça marche pour moi, juste définit le hauteur de la modalPanel et le div, parfois ça bloque:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<rich:modalPanel ..>
   <div class="scrollablePanel">
   </div>
</rich:modalPanel>
 
 
.scrollablePanel{
     overflow: scroll !important;
     height:400px;
}

[meriyem]

j'ai essayé mais en vain !! Est ce que tu a testé le code que je t'ai envoyé ou bien c'est un autre code si c'est le cas envoi le moi et merci

[meriyem]

je ne voulais pas resté bloquée j'ai contourné le problème et j'ai mis un scrollBar pour les dataTable et voici le code :

Code :

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

1
2
3
4
5
6
7
8
 
<rich:modalPanel>
....................
<div style="width=500px; height=300px;overflow:scroll">
.................
</div>
 
</rich:modalPanel>

et comme ça je suis contente

merci Sniper37