select multiple avec hauteur dynamique et chevauchement

Marsh Posté le 11-07-2021 à 22:41:30

Hello à tous,

J'ai pour un de mes clients créer un formulaire web de grande taille sur une seule page (beh oui, c’est pas bien mais c'est comme cà )

Dans un premier temps pour réduire en hauteur, on à coder que les champs <select multiple> fassent une taille de 1 et qu'au survole ils fassent soient le nombre d'éléments, soit un max de 25.
Ca c'est ok voici le code JS :

$('.formDynSelectMultiple').mouseover(function(){
if ($(this).find('option').length >= 25) {
$(this).prop("size",25);
} else {
$(this).prop("size",$(this).find('option').length);
}
});

$('.formDynSelectMultiple').mouseout(function(){
$(this).prop("size",1);
});

à présent mon client est gêné par le fait qu'au survole cela fasse bouger tout le formulaire en hauteur.

Est il possible de faire en sorte que l'affichage des options du select s'effectuent sans bouger la mise en page, donc que la liste chevauchent les autres éléments du formulaire ?

Merci pour vos pistes ou vos réponses. (ou bien d'autre idée, hormis de tout refaire bien sure )

Pierre

Marsh Posté le 11-07-2021 à 22:41:30

Marsh Posté le 12-07-2021 à 09:43:15

Tu peux mettre ton select en position absolute dans un div en position relative et de hauteur fixe.

HTML:

Code :

<div class="conteneur">
<select name="" class="formDynSelectMultiple">
<option></option>
[...]
</select>
</div>

CSS:

Code :

div.conteneur {position:relative;height:50px;z-index:1;}
div.conteneur select {position:absolute;}

Tu ajusteras la hauteur de ton div suivant ton besoin...

---------------
D3

Marsh Posté le 12-07-2021 à 10:39:43

Merci mechkurt, ca fonctionne nickel, tu m'a fais gagner plusieurs heures de recherche.

---------------
Du tofu en Alsace : www.tofuhong.com

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *