Un probléme Bootstraps

**Badeorne** · 13/06/2016, 16h14

Bonjour, j'ai un problème avec bootstrap j'ai crée un tableau avec une barre scroll et une saisie de recherche, mais chaque fois que je rentre un caractère dans la barre de recherche mon tableau s'agrandit idem si je clique sur le header de mon tableau... Des idées d'où ça viens ?

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
96
97
98
99
100
101
102
 
<!DOCTYPE html>
<html> 
<head>
 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/dataTables.bootstrap.min.css" rel="stylesheet">   
 
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/dataTables.bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.dataTables.min.js"></script>
 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
 
<style>
        table#tableau th {color: black; border: 1px solid black;}
        table#tableau td {border: 1px solid black;}      
    </style>
<script type="text/javascript"  class="init" >
 
$(document).ready(function() {
    $('#table1').DataTable( {
        scrollY:        '35vh',
        paging:         false,
        scrollCollapse: true,       
    } );
} );
 
</script>
</head>
<body>
 
 <?php include_once ("Menu.php");  ?>
 
<div class="container">
<div class="navbar-header">
<div class="row">
<div class="col-md-11 col-md-offset-2">
 
 <table class="table" cellspacing="0" width="100%" id="table1" >
            <thead>  
            <tr>
                <th  data-field="Date"   data-sortable="false">Date</th>
                <th data-halign="center" data-align="center" data-field="tempExt" data-sortable="false">Température extérieure</th>
                <th data-halign="center" data-align="center" data-field="tempInt" data-sortable="false">Température intérieure / bacs</th>
                <th data-halign="center" data-align="center" data-field="ConsInt" data-sortable="false">Consigne intérieure / bacs</th> 
            </tr>
            </thead>
            <tbody>  
 
            <?php              
            $i = 1;
            while ($i <55)
            {
            echo '<tr>';
            echo '<td>';
            echo $i . '05/09/05 ';
            echo' </td>';
            echo' <td>';
            echo' 19.0°C';
            echo' </td>';
            echo' <td>';
            echo' 19.3°C / 25.9°C';
            echo'  </td>';
            echo' <td> ';
            echo' 20.0°C / 26.1°C';
            echo' </td>';
            echo' </tr>';
            $i++;
            }
            
            ?>  
 
 
            </tbody>
 
        </table>     
         </div>
         <div class="col-md-10">
      <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Blocs<span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD1"> Bloc 1 </a> </li>
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD2"> Bloc 2</a> </li>
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD3"> Bloc 3 </a></li>
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD4"> Bloc 4</a> </li>
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD5"> Bloc 5</a> </li>
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD6"> Bloc 6</a> </li>
<li> <a role="menuitem" tabindex="-1" href="SiteBDDBDD.php?choix=BDD7"> Bloc 7</a> </li>
   </ul>
   </div>
  </div>
   </div> 
    </div>
     </div>
 
<script src="bootstrap.min.js"></script>
</body>
</html>

**JujuPomme** · 13/06/2016, 16h31

Yop,

C'est probablement pas un problème d'HTML, mais de CSS voir JS.

Je vois que tu utilises le plugin DataTables. Tu fais des requêtes AJAX?

Tu as un CSS associé à ce fichier?

**Badeorne** · 13/06/2016, 16h33

Je ne fait pas de requête ajax, mais l'exemple que je suivait oui.
Pour ce qui de js/css je trouverai jamais le problème dans les 9 milliards de ligne de codes.

**JujuPomme** · 13/06/2016, 16h38

Pour également avoir utilisé DataTables, il fonctionne très bien. Bien que ce soit pas le meilleur, il n'est pas non plus très compliqué à débug et le support avec Alan Jardine est vraiment au top.

Pour ce qui est de ton code, on va déjà commencer par les bases :
1) Les scripts se chargent toujours en fin de pages par soucis de performances de chargement. (ça t'évitera en plus, de faire l'erreur qui va suivre)
2) Ligne 10:

Code :

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

<script src="bootstrap/js/bootstrap.min.js"></script>

Ligne 100:

Code :

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

<script src="bootstrap.min.js"></script>

On réitère pour tes css :

Ligne 6:

Code :

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

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

Ligne 14:

Code :

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

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

3) Tout dans le même fichier?

Code :

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

1
2
3
4
<style>
        table#tableau th {color: black; border: 1px solid black;}
        table#tableau td {border: 1px solid black;}      
    </style>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"  class="init" >
 
$(document).ready(function() {
    $('#table1').DataTable( {
        scrollY:        '35vh',
        paging:         false,
        scrollCollapse: true,       
    } );
} );
 
</script>

**Badeorne** · 13/06/2016, 16h46

Ok je referai ça demain pour voir ce que ça fait, merci

**JujuPomme** · 13/06/2016, 16h48

En soit rien. C'est juste que quand on développe, il y à certaines choses qui doivent être automatique. A voir ton code, c'est assez brouillon, donc ça peut-être beaucoup de choses...

Commence déjà par faire un code propre, vérifie les chemins de tes fichiers, soit en sorte qu'ils soient réellement appelés, et qu'une seule fois.

**Badeorne** · 14/06/2016, 14h23

Envoyé par JujuPomme

Commence déjà par faire un code propre

c'est bon mon code est propre et j'ai résolu mon problème "tout seul"

merci

**JujuPomme** · 14/06/2016, 14h27

Envoyé par Badeorne

c'est bon mon code est propre et j'ai résolu mon problème "tout seul"

merci

Cool, bien joué !

Peut-être pourrais-tu mettre ta solution? Si une personne lambda à le même problème, elle sera surement contente d'avoir la solution

Un probléme Bootstraps

Langage PHP

Discussions similaires

Partager

Partager