ajouter un ScrollBar

bonjour

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

merci

Citation:

Envoyé par meriyem

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:

1 2 3 .scrollable_body { overflow:auto; }

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??

tu peux montrer le code..

bonjour

voici le 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
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>

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

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

ç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

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

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; }

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

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:

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