Discussion :

[hardballer]

Bonjour à tous !

Je cherche à obtenir une CheckboxList avec des scrollbars horizontales et verticales qui n'apparaîtront que si elles sont nécessaires, pour cela j'inclus ma checkboxList dans une div :

Code :

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

1
2
3
4
5
 
<div align="left" style="overflow:auto;width:140px;height:170px;" >
      <asp:CheckBoxList ID="chkLst1" runat="server" BorderStyle="None" BorderWidth="1px" CellPadding="0" CellSpacing="0">
      </asp:CheckBoxList>
</div>

Cela fonctionne très bien pour la scrollbar verticale, en effet la hauteur de la checkboxlist va changer en fonction du nombre d'items, et donc la scrollbar de la div apparaitra si la checkboxlist est trop grande.

Par contre ce n'est pas bon pour la scrollbar horizontale, en effet la checkboxlist prend comme largeur maximale celle de la div, et si les items sont trop longs ils sont affichés sur plusieurs lignes, de ce fait la largeur de la checkboxlist ne dépasse jamais celle de la div et la scrollbar de la div n'est jamais affichée.


Je pourrais résoudre ce problème en fixant à ma checkboxlist une largeur "maximale" pour que toutes les valeurs possibles soient toujours affichées sur une seule ligne, sauf que deux raisons m'en empêche :

- Les éléments de la checkboxlist viennent d'une base de donnée, donc cette largeur "maximale" est difficile à établir.
-cette solution afficherait toujours la scollbar horizontale, même lorsqu'elle n'est pas nécessaire.


J'imagine donc deux approches pour résoudre mon problème :

- Imposer à ma checkbox list de s'agrandir automatiquement en largeur plutôt qu'afficher les items sur plusieurs lignes.

- Parcourir tous les items de la checkboxList, "mesurer" la largeur de chaque élément, et affecter a la checkboxList la largeur du plus grand de ses items.


Je n'ai bien sûr aucune idée de la façon d'implémenter l'une ou l'autre de ces solutions, si vous avez des idées elles sont les bienvenues !



Merci d'avance

[hardballer]

J'ai trouvé un moyen de résoure a peu près le problème au moyen de javascript :



En premier lieu j'initialise la largeur de la checkboxList à une grande valeur "maximale".

Code :

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

1
2
3
<div id="divchklst1" align="left" style="width:140px;height:170px;" >
<asp:CheckBoxList  Width="400" ID="chklst1" runat="server" BorderStyle="None" BorderWidth="1px">
</asp:CheckBoxList></div>

puis , lors du onload du client j'appelle la fonction suivante en lui passant l'id de la div et l'id de la checkboxlist :

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
 
 
 GereScrollbarsDivChkboxList('<%= chklst1.ClientID %>', 'divchklst1');
 
 
//gere correctement les scrollbars  d'une combinaison div + chkboxlist
function GereScrollbarsDivChkboxList(id_chkboxlist, id_div)
{
    //va chercher la largeur maximale des éléments de la chkboxlist
    var chklist = $G(id_chkboxlist);
    var   labelarray = chklist.getElementsByTagName('label');
    var   maxX = 0;
 
    for (var i=0; i<labelarray.length; i++)
     {
         var wid = labelarray[i].offsetWidth;
        if( wid > maxX)
        {
              maxX = wid;
        }   
     }
 
     //va chercher la somme des hauteurs des lignes de la checkboxlist
     var   sommeY = 0;
    var   trarray = chklist.getElementsByTagName('tr');
     for (var i=0; i<trarray.length; i++)
     {
        var hei= trarray[i].offsetHeight;
        sommeY = sommeY + hei;  
     }
 
 
     //si la div est moins large que cette largeur maximum alors on affiche la scrollbars X
    var div = $G(id_div); 
    div.style.overflow = "";
    if(div.offsetWidth < maxX)
    {
        div.style.overflowX  = "auto";
    }
    else
    {
      div.style.overflowX  = "hidden";
    }
 
     //si la div est moins haute que cette somme de hauteurs alors on affiche la scrollbars Y
    if(div.offsetHeight < sommeY)
    { 
        div.style.overflowY  = "auto";
    }
    else
    { 
      div.style.overflowY  = "hidden";
    }
}

Pour que cela fonctionne il faut que la checkboxlist aie sa propriété "RepeatLayout" a la valeur "Table" (sinon on ne saura pas additionner les auteurs de lignes de cette façon).


Le seul inconvénient est que la scrollbar Horizontale, lorsqu'elle est affichée, peut défiler sur toute la largeur "maximale" affectée à la chkboxlist, mais cela ne me parait pas des plus génant.