Style CSS : DataGrid / scrollbar sur un select / AccordionContainer

**Daniel_Gibot** · 13/01/2010, 12h10

Comme l'intitulé le laisse paraitre, j'ai plusieurs questions

- 1ere question :
Cela concerne le style des DataGrid. J'utilise actuellement le tundraGrid.css que je modifie en fonction des couleurs demandées par le client. Malheureusement je bloque sur le fond. En effet le DataGrid est d'une hauteur de 90% d'un div mais parfois le nombre de ligne ne remplit pas entièrement la zone et donc un énorme pavé blanc apparait. Sauriez-vous quelle class css est à l'origine de cette zone blanche ?

- 2eme question :
J'utilise le nouvel objet "select" de la v1.4 et je n'arrive pas a trouver comment intégrer une scrollbar lorsque l'on clique dessus. Il y a un certain nombre d'options dans ce select et cela déborde de la fenêtre, du coup il faut donner un coup de molette pour afficher la fin de la liste et donc faire descendre la fenêtre au lieu de la liste. (je ne sais pas si je suis très clair

)
Y a t'il une fonction pour activer une quelconque scrollbar ?
Cela représente une trentaine de lignes affichées d'un coup par le select.
J'ai trouvé en fouinant un peu (ou pas assez avant de poster). Il suffit d'ajouter maxHeight="200" au niveau de la balise <select> (le 200 pouvant être modifié selon votre souhait)

- 3eme question :
Pour créer un menu un peu plus dynamique j'utilise un accordionContainer avec des contentPane. Cet accordion est d'une hauteur de 300px et lorsque je clique sur le dernier titre (contentPane) une petite zone de 2-3 px de haut apparait qui réduit la taille du dernier titre. (ca fait tout moche)
Une petite idée ou faudra que je crève un œil au client pour qu'il ne le voit pas :p ?
En testant un peu dans tous les sens pour voir ce que cela donnait, j'ai reussi à obtenir ce que je voulais en déplaçant la hauteur du AccordionContainer dans le premier AccordionPane.

Code :

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

1
2
3
4
5
6
7
8
9
10
<div  dojoType="dijit.layout.AccordionContainer" id="monMenu" style="width:197px;height:300px;" >
<!-- Déclaration du premier AccordionPane avec son "chemin" complet -->
    <div  dojoType="dijit.layout.ContentPane" title= "Premier panneau" style="height:300px;">
    <div  dojoType="dijit.layout.ContentPane" title="Deuxième panneau">
    </div>
    <div  dojoType="dijit.layout.ContentPane" title="Troisième panneau">
    </div>
</div>
<div style='width:197px;'><a href='#deco'>Déconnexion</a></div>

Voila

Je vous remercie d'avance pour votre aide !

Du coup je me remercie pour avoir trouvé

**emmanuel.remy** · 13/01/2010, 14h44

Voilà un post comme je les aime: auto-réponse !

ERE

**Daniel_Gibot** · 13/01/2010, 16h47

Bon bah je ne trouve toujours pas comment modifier la zone de fond de mon datagrid pour que ce soit harmonisé avec la couleur de fond de ma balise <body>.
Je vous mets le code... on sait jamais

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
 
 
<div id="main" dojoType="dijit.layout.BorderContainer" design="headline">
	<div dojoType="dijit.layout.ContentPane" region="top" 
          style="background-color:#dfdfdf">
        </div>
	<div dojoType="dijit.layout.ContentPane" region="left"
	  style="background-color:white;width: 210px;">
			<?php
                                include("./menu.php");
                        ?>
	 </div>
	 <div dojoType="dijit.layout.ContentPane" region="center"
	   style="background-color:#F5ECCF">
	   <div id="page">
	   <span dojoType="dojo.data.ItemFileReadStore" jsId="donnees" 
		url="./store/listes.php"></span>
 
	  <table dojoType="dojox.grid.DataGrid" jsId="tableau" store="donnees" 
        rowsPerPage="25" clientSort="false" height='90%' width='997px'
        rowSelector="10px" >
            <thead>
                <tr>
                    <th width="90px" field="id">
                        <b>Numéro</b>
                    </th>
                    <th width="150px" field="demandeur" >
                        <b>Demandeur</b>
                    </th>
					<th width="333px" field="objet" >
                        <b>Objet</b>
                    </th>
					<th width='50px' field="plateforme" >
                        <b>Pf</b>
                    </th>
					<th width="150px" field="valideur" >
                        <b>Valideur</b>
                    </th>
					<th width="100px" field="fenetre" >
                        <b>Fenetre</b>
                    </th>
					<th width="125px" field="DateCrea" >
                        <b>Date de création</b>
                    </th>
                </tr>
            </thead>
        </table>
	</div>
	</div>
</div>

**emmanuel.remy** · 13/01/2010, 22h12

Salut,

2 solutions a priori:

soit tu donnes un id à ta grille et tu modifies directement le CSS de cet élément
soit tu modifies la class dojoxGrid

ERE

**Daniel_Gibot** · 14/01/2010, 08h57

2 - Tu veux dire mettre un id à ma balise <table> et rajouter un css sur cet id ?
Ca revient à la même chose que rajouter un style='background-color:macouleur' qui ne fonctionne pas

1 - Modifier la class (css ?) du dojoxGrid ? J'ai modifié chaque class que contient le tundraGrid.css et rien à faire ca ne change pas

**emmanuel.remy** · 14/01/2010, 10h04

Re,

Envoyé par Daniel_Gibot

2 - Tu veux dire mettre un id à ma balise <table> et rajouter un css sur cet id ?
Ca revient à la même chose que rajouter un style='background-color:macouleur' qui ne fonctionne pas

1 - Modifier la class (css ?) du dojoxGrid ? J'ai modifié chaque class que contient le tundraGrid.css et rien à faire ca ne change pas

En modifiant le background-color de .dojoxGrid cela fonctionne, je viens de vérifier.

ERE

**Daniel_Gibot** · 14/01/2010, 11h19

J'ai modifié le background-color du dojoxGrid et rien du tout. Attention, mon background a bien changé mais comme je l'ai précisé, parfois il n'y a pas suffisamment de lignes pour couvrir toute la zone prédéfinie du grid (qui est de 90% en hauteur). Du coup cela donne ca :

Nom : datagrid.JPG
Affichages : 76
Taille : 39,5 Ko

Nom : datagrid.JPG
Affichages : 76
Taille : 39,5 Ko

C'est cette zone blanche sous les lignes du grid que je souhaite modifier.

**emmanuel.remy** · 14/01/2010, 11h36

Tu peux passer une page complete avec des données statiques incluses que je puisse tester car cela fonctionne chez moi

ERE

**Daniel_Gibot** · 14/01/2010, 12h02

Je te joins une page avec des données fixes. En largeur ce n'est pas grave car mon futur tableau sera à la bonne dimension. Par contre en hauteur, tu devrais bien voir la zone blanche sous les quelques lignes. Je te joins également le tundraGrid.css que j'ai modifié.

Au passage, j'ai testé avec le autoHeight='true' dans mon grid. Ca marche très bien tant que tu ne dépasses pas la taille du <div>. Après le scroll ne va pas jusqu'au bout des lignes du coup ce n'est pas une option que je choisis

test.php

tundraGrid.css

**emmanuel.remy** · 14/01/2010, 12h30

Re,
Effectivement, conserver le blanc pour mon test trop rapide fausse le résultat !

Modifie ainsi tundraGrid.css, cela doit le faire:

Code :

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

1
2
3
.tundra .dojoxGridScrollbox {
background-color:#F5ECCF;
}

ERE

**Daniel_Gibot** · 14/01/2010, 12h40

Ca marche nickel !

Je te remercie d'avoir pris le temps de m'aider !

Style CSS : DataGrid / scrollbar sur un select / AccordionContainer [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager