Discussion :

[apdf1]

Bonjour,

J'ai une liste déroulante dans un Fieldset, je voulais savoir s'il était possible de modifier la hauteur de Fieldset à l'ouverture de la liste déroulante.

Mon code:

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
<form action="" method="post" id="choix_cartes">
                                   <fieldset style="border: 4px double #3e3737">
                                     <legend>Sélectionnez une carte</legend>      
 
 
<select id="list_deroul" style="background-color:#000; color:#f4f1f1; text-align:center;" onchange="javascript:location.href=this.options[this.selectedIndex].value;">
                        <option value="vide">- - - - - Choisissez une région - - - - -</option>
                        <option value="Auvergne_rhone_alpes.html">Auvergne Rhône Alpes </option>
                        <option value="Ardeche_arrondissements.html">Ardèche Arrondissement </option>
                        <option value="Ardeche_circonscriptions.html">Ardèche Circonscription </option>
                        <option value="Ardeche_cantons.html">Ardèche Cantons </option>
                        <option value="Ardeche_communes.html">Ardèche Communes </option>
                        <option value="Ardeche_Largentière_communes.html">Ardèche Largentière Communes </option>
<!--                        <option value="Ardeche_privas_communes.html">Ardèche privasCommunes </option> -->
                        <option value="Ardeche_tournon_sur_rhone.html">Ardèche Tournon sur Rhône Communes </option>
 
                                                         </select>
                                                        </fieldset>
                                                          </form>

je vous remercie d'avance

Max

[SpaceFrog]

Le souci de la hauteur du select c'est qu'il est plus lié au navigateur qu'un div par exemple, sa hauteur dépliée est liée au nombre d'options affichées déterminée également par l'attribut size ...
De plus les options se déroulent en superposition ...
Le plus simple est encore de trouver un plugin d'émulation de select du coup les options étant en général emulées par des li dans un ul, le fieldset
avec jquery un exemple vite fait : https://jsfiddle.net/qsetp935/29/

[danielhagnoul]

À mon avis ce n'est pas possible et ce n'est pas nécessaire, car la partie ouverte du select se place au-dessus du contenu de la page web.

[Invité]

Bonjour,

j'ai DEJA donné une réponse ici... à laquelle tu n'as DEJA pas répondu...

[NoSmoking]

Bonjour,
j'enfonce le clou
Ergonomiquement parlant je considère que c'est une mauvaise idée, tous les « Down_Quelque_Chose » recouvre le contenu qui suit cela évite accessoirement à la page de sautiller.

[Invité]

En effet : ce n'est pas parce qu'une solution existe qu'elle est bonne (ou la meilleure)...

D'autant plus (ou moins ?) sur écran tactile....

[apdf1]

Bonjour à Tous.

je suis allé voir le site https://jsfiddle.net/qsetp935/29/ de SpaceFrog sa fonctionne sur le site et quand je recopie sur mon ordi sa ne fonctionne pas ou je me suis planter?

Merci et bonne journée

Max

[SpaceFrog]

tu ne charges sans doute pas jquery ??

[apdf1]

Re,

Si je suis aller le prendre sur le site et j'ai mis le lien

Code :

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

<script src='js/jQuery v3.3.1.js'></script>

[SpaceFrog]

Regarde en console si tu as un message d'erreur ..

[apdf1]

Re,

Non justement, même la liste ne s'ouvre pas à tu essayer toi?

[SpaceFrog]

Le code fourni est 100% fonctionnel.
Si chez toi il ne se passe rien c'est que tu as un souci de jquery ou de selecteurs ...

Comment l'as tu implémenté ?
As tu recopié tout le code avec le html ? as tu adapté en modifiant les id et classes ?

[apdf1]

Bonjour SpaceFrog,

Voila mon code avec bien entendu jquery en lien.

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
   <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 
 
    <style>
        
        
.options li { list-style:none;
list-style-position: outside;
 cursor: pointer;
 }
 
.options li:hover {
  background-color: silver;
}
.oflow {
  border: solid 1px red;
overflow: visible; }
.options{
  display: none;
  margin: 0;
  padding:0;
  border: solid 1px silver;}
#foo { 
 border :0;
 }
 .select {
   border: solid 1px silver;
   display:inline-block;
   }
        
        </style>    
 
     <script>   
        
      $ (function(){
 
$('.select').on('click', function(){
  $(this).next('.options').slideToggle();
})
$('#foo').on('focus', function(){ $(this).blur();})
 
$('.options>li').on('click', function(){
  selval= $(this).text();
  $('#foo').val( selval );
  $(this).parent('.options').slideToggle();
});
 
});
        
       </script> 
 
    </head>
    <body>
 
      <form >
<fieldset id="fs" class="oflow">
<div class="select">
<input type="text" id="foo" value="" /> ▼
<ul class="options">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
<li>six</li>
</ul>
 
</div>
 
</fieldset>
</form>  
 
        <script src='js/jQuery v3.3.1.js'></script>
 
    </body>
</html>

Merci et bonne journée

Max

[SpaceFrog]

Petit rappel ...
le code sur ta page et interprété chronologiquement dans l'ordre des lignes ...
ton jquery est cahrgé en fin de page alors qu tu invoques des fonctions en début de page !!!
Tu dois obligatoirement avoir un message en console du genre "$ is undefined" ...

La solution:
soit tu remontes ton appel au chargement de jquery en haut de page AVANT ton script de ready dans lequel tu initialises les events
soit tu descends ton ready en bas de page APRES ton appel au chargement de jquery ...

[apdf1]

Re,

Je viens de faire se que tu me demande le voici:

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
  <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 
    <style>
     
.options li { list-style:none;
list-style-position: outside;
 cursor: pointer;
 }
 
.options li:hover {
  background-color: silver;
}
.oflow {
  border: solid 1px red;
overflow: visible; }
.options{
  display: none;
  margin: 0;
  padding:0;
  border: solid 1px silver;}
#foo { 
 border :0;
 }
 .select {
   border: solid 1px silver;
   display:inline-block;
   }   
        </style>    
 
    </head>
    <body>
 
      <form >
<fieldset id="fs" class="oflow">
<div class="select">
<input type="text" id="foo" value="" /> ▼
<ul class="options">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
<li>six</li>
</ul>
 
</div>
 
</fieldset>
</form>  
 
 
                      <script src='js/jQuery%20v3.3.1.js'></script>
 
 
     <script>   S
      $ (function(){
 
$('.select').on('click', function(){
  $(this).next('.options').slideToggle();
})
$('#foo').on('focus', function(){ $(this).blur();})
 
$('.options>li').on('click', function(){
  selval= $(this).text();
  $('#foo').val( selval );
  $(this).parent('.options').slideToggle();
});
 
});     
       </script> 
 
 
 
    </body>
</html>

Et sa ma rien donnée et sur ma console je n'est pas de message d'erreur?

@+ Max

[apdf1]

Re,

Je viens de rechercher le code au complet et appliquer ton conseil et sa fonctionne!!!!!!

Je te remercie et te souhaite une bonne journée.

Max