Redimensionner la largeur d'une checkboxList en fonction de la largeur de ses Items

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:

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:

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.