select multiple avec hauteur dynamique et chevauchement

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : select multiple avec hauteur dynamique et chevauchement

PierreC

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

Publicité

mechkurt

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

PierreC

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

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

FORUM HardWare.fr

Programmation

HTML/CSS

select multiple avec hauteur dynamique et chevauchement

Sujets relatifs
Select where avec plusieurs valeurs	Recherche sur multiple termes dans attribut data
[VBS] - Input multiple, Combobox, radio..	Macro de publipostage en multiple fichiers pdf - Message d'erreur
HTML Select et OnClick() ne fonctionne pas sur Safari	PostGrSQL SELECT DISTINCT un truc pas clair SVP
[PyQt][résolu] Style dynamique	Passer les guillemets dans un SELECT Potgresql #%@* WTF !!
MYSQL : update et select en une seule requête	[Javascript] Désélectionner un choix d'un select
Plus de sujets relatifs à : select multiple avec hauteur dynamique et chevauchement

Page générée en 0.036 secondes