Limiter un tableau en hauteur

**Pelote2012** · 04/03/2014, 11h57

Bonjour,

J'essaie de limiter en hauteur un table mais sans succès

Code html :

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
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
    Inherits="Jquery.tableHautMax" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .MaxHeightPopup
        {
            border: 0;
            max-height: 100px;
            display: block;
            overflow-y: scroll;
        }
    </style>
    <script type="text/javascript">
        $(function () {
 
            $("#btnAdd").click(function () {
                var HL = 50;
                var row = '<tr height=' + HL + '><td>1</td><td>2</td><td>3</td><td >4</td></tr>';
                $('#tbdatas').append(row);
 
            });
        });
    </script>
</head>
<body>
    <button id="btnAdd">
        Ajouter 1 ligne</button>
    <table class="MaxHeightPopup" id="tbdatas">
 
    </table>
</body>
</html>

Voici mon code mais quand j'ajoute une ligne ça agrandi le tableau mais à l'infini et il n'y a jamais de scroll... Merci de votre aide.

**rodolphebrd** · 04/03/2014, 12h14

Bonjour,

Le code fonctionne pour moi :

En isolant le CSS : http://codepen.io/anon/pen/EwiKt
En reprenant tout le code : http://codepen.io/anon/pen/rpweI

Sinon il y a un exemple qui est souvent utilisé : http://www.imaputz.com/cssStuff/bigFourVersion.html

**Pelote2012** · 04/03/2014, 12h35

J'étais surpris quand tu m'as que ça marchait ... je viens de voir que ça marche sous Chrome mais pas sous IE9 (je développe avec un poste en vista )
N'y a -t-il pas une méthode valable aussi pour IE9? sans passer par des div

**rodolphebrd** · 04/03/2014, 13h00

Rapidement je dirais (pour IE) de placer le tableau dans un conteneur...
Fonctionne sur IE : http://codepen.io/anon/pen/ujqDa

**Pelote2012** · 04/03/2014, 14h18

Oui j'avais pensé à cela, mais mon problème est que dans mon tableau je dois mettre une liste de type ddslick. Dans ce cas, quand je clique pour ouvrir ma liste elle reste à l'intérieure de mon div. et moi je voudrait qu'elle passe au-dessus.

Code html :

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
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
    Inherits="Jquery.tableHautMax" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
    <style type="text/css">
        .MaxHeightPopup
        {
            border: 0;
            max-height: 100px;
            overflow: hidden;
            overflow-y: scroll;
            width: 400px;
            z-index: 100;
        }
    </style>
    <script type="text/javascript">
        $(function () {
 
            var ddData = [
                {
                    text: "Facebook",
                    value: 1,
                    selected: false,
                    description: "Description with Facebook",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                },
                {
                    text: "Twitter",
                    value: 2,
                    selected: false,
                    description: "Description with Twitter",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                },
                {
                    text: "LinkedIn",
                    value: 3,
                    selected: true,
                    description: "Description with LinkedIn",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                },
                {
                    text: "Foursquare",
                    value: 4,
                    selected: false,
                    description: "Description with Foursquare",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                }
            ];
 
            $("#btnAdd").click(function () {
                var row = '<tr height="50"><td>';
                row += '<select class="myDropdown"></select></td>';
                row += '<td>2</td><td>3</td><td >4</td></tr>';
                $('#tbdatas').append(row);
 
                $('.myDropdown').ddslick({
                    zindex: 200,
                    data: ddData,
                    width: 300,
                    selectText: "Select your preferred social network",
                    imagePosition: "right"
                });
 
            });
        });
    </script>
</head>
<body>
    <button id="btnAdd">
        Ajouter 1 ligne</button>
    <div class="MaxHeightPopup">
        <table id="tbdatas">
        </table>
    </div>
</body>
</html>

Pour le moment, la seule chose qui permet de faire passer le ddslick au-dessus du div c'est de mettre overflow: visible; mais dans ce cas mon tableau dépasse aussi mon div ... la ça me fais des noeuds au cerveau car il faut que ma div soit overflow:auto pour le tableau mais visible pour mon ddslick

**Pelote2012** · 06/03/2014, 14h57

Bon j'ai vu avec mon client, je suis passé en Win 8.1. On oublie Vista. De toute façon, maintenant, tous les poste sont au minimum à Win 7.
On avait gardé mon poste en vista, pour tester les développement sur des vieux coucous.

Je reviens à la version avec table et display bloc.

Code html :

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
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
    Inherits="Jquery.tableHautMax" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
    <style type="text/css">
        .MaxHeightPopup
        {
            border-style: solid;
            border-color: red;
            display: block;
            max-height: 100px;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        $(function () {
 
            var ddData = [
                {
                    text: "Facebook",
                    value: 1,
                    selected: false,
                    description: "Description with Facebook",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                },
                {
                    text: "Twitter",
                    value: 2,
                    selected: false,
                    description: "Description with Twitter",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                },
                {
                    text: "LinkedIn",
                    value: 3,
                    selected: true,
                    description: "Description with LinkedIn",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                },
                {
                    text: "Foursquare",
                    value: 4,
                    selected: false,
                    description: "Description with Foursquare",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                }
            ];
 
            $("#btnAdd").click(function () {
                var row = '<tr height="50"><td>';
                row += '<select class="myDropdown"></select></td>';
                row += '<td>2</td><td>3</td><td >4</td></tr>';
                $('#tbdatas').append(row);
 
                $('.myDropdown').ddslick({
                    zindex: 200,
                    data: ddData,
                    width: 300,
                    selectText: "Select your preferred social network",
                    imagePosition: "right"
                });
 
            });
 
            $("#btnAdd1").click(function () {
                var row = '<tr height="50"><td>';
                row += '<select class="myselect1"></select></td>';
                row += '<td>2</td><td>3</td><td >4</td></tr>';
                $('#tbdatas1').append(row);
 
            });
        });
    </script>
</head>
<body>
    <button id="btnAdd">
        Ajouter 1 ligne</button>
        <table class="MaxHeightPopup" id="tbdatas">
        </table>
        <br />
         <button id="btnAdd1">
        Ajouter 1 ligne</button>
        <table class="MaxHeightPopup" id="tbdatas1">
        </table>
</body>
</html>

J'ai mis en premier un exemple avec ma ddslick list qui reste cloitrer dans mon tableau
et mon 2nd exemple avec des select classic qui eux passe au dessus du tableau (ce que je voudrait pour mon 1er exemple)

J'ai remarqué que si j'ajoute

Code css :

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

1
2
3
4
5
 
 .dd-container
        {
            position:static;
        }

Ma liste passe bien au dessus, mais elle se décale par rapport à mon scroll

**Pelote2012** · 11/03/2014, 15h25

Code html :

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
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
    Inherits="Jquery.tableHautMax" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
    <style type="text/css">
        .MaxHeightPopup
        {
            border-style: solid;
            border-color: red;
            display: block;
            max-height: 100px;
            overflow: auto;
        }
        
        .dd-container
        {
            position: static;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var mypositions = [];
            var ddData = [
                {
                    text: "Facebook",
                    value: 1,
                    selected: false,
                    description: "Description with Facebook",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                },
                {
                    text: "Twitter",
                    value: 2,
                    selected: false,
                    description: "Description with Twitter",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                },
                {
                    text: "LinkedIn",
                    value: 3,
                    selected: true,
                    description: "Description with LinkedIn",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                },
                {
                    text: "Foursquare",
                    value: 4,
                    selected: false,
                    description: "Description with Foursquare",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                }
            ];
 
            $("#btnAdd").click(function () {
                var nbl = $('#tbdatas tr').length;
                var row = '<tr height="50"><td>';
                row += '<select class="myDropdown" id="' + nbl + '"></select></td>';
                row += '<td>2</td><td>3</td><td >4</td></tr>';
                $('#tbdatas').append(row);
 
                $('#' + nbl).ddslick({
                    zindex: 200,
                    data: ddData,
                    width: 300,
                    selectText: "Select your preferred social network",
                    imagePosition: "right"
                });
 
                var windowpos = $("#tbdatas").scrollTop();
                mypositions.push(parseInt($('#' + nbl).position().top) + windowpos);
            });
 
            $("#tbdatas").scroll(function () {
                var windowpos = $("#tbdatas").scrollTop();
                $('.dd-container').each(function () {
                  $('.dd-options', $(this)).css("top", parseInt(this.clientHeight) + parseInt(mypositions[this.id]) - windowpos);                });
                
            });
 
        });
    </script>
</head>
<body>
    <button id="btnAdd">
        Ajouter 1 ligne</button>
    <table class="MaxHeightPopup" id="tbdatas">
    </table>
</body>
</html>

Limiter un tableau en hauteur

Dimensionnement en CSS

Discussions similaires

Partager

Partager