Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1929 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Création d'un "select" personnalisé

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Création d'un "select" personnalisé

n°2329954
MaybeEijOr​Not
but someone at least
Posté le 03-03-2019 à 20:58:13  profilanswer
 

Bonjour,
 
J'ai un problème de décalage de mes divs se trouvant dans dans la div avec l'id "filtercontainer".
J'ai voulu me créer un "select" personnalisé permettant d'ajouter des filtres. À chaque fois que je sélectionne un filtre ça le supprime de la liste déroulante pour l'ajouter à la liste des filtres, cela fonctionne bien, sauf quand il ne reste plus assez de choix car ma liste déroulante diminue alors en hauteur. Mon décalage entré avec une valeur fixe n'est alors plus bon. Auriez vous une idée de comment corriger cela, si ce n'est en forçant la hauteur de mon "select" personnalisé ?
 
code (version finale plus bas)
 
Pour ajouter un filtre cliquez sur "filtre(s) :" ou sur le "+".


Message édité par MaybeEijOrNot le 03-04-2020 à 01:36:41

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le 03-03-2019 à 20:58:13  profilanswer
 

n°2329973
MaybeEijOr​Not
but someone at least
Posté le 04-03-2019 à 15:08:40  profilanswer
 

Bon j'ai réussi à faire ce que je voulais en rajoutant une couche de JS : code (version finale plus bas)
Mon code est assez dégueulasse je dois dire. :whistle:

 

Et ce sera encore pire quand je vais l'intégré à mon code existant parce que la partie HTML va être générée dynamiquement. :lol:

 


EDIT : correction d'un bug + légère simplification du code.


Message édité par MaybeEijOrNot le 03-04-2020 à 01:36:53

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2329988
MaybeEijOr​Not
but someone at least
Posté le 04-03-2019 à 19:37:00  profilanswer
 

Bon j'ai nettoyé un peu mon JS puis utilisé une technique bien dégueu pour ajouter des bordures à mes "li" sans que le dernier ne possède une bordure redondante avec celle de ma "div" parente. Lorsque je les sélectionne, je ne les supprime pas, je les désactive juste (display: none). Par conséquent, le dernier "li" affiché n'est pas forcément le dernier enfant de la liste, il peut très bien se trouver un autre "li" après mais désactivé. Donc on oublie le last-child en css. :(
J'ai donc ajouté une ligne "hr" de hauteur nulle, décalée de la hauteur de sa bordure supérieure de couleur blanche qui vient par dessus la dernière bordure affichée.

 

Je pense que c'est bon de mon côté, le reste ça sera de la mise en forme simple puis intégration à mon code existant.
Remarquez-vous des problèmes ?
Avez-vous une idée pour faire plus simple ? J'ai rapidement regardé après coup ce qui existait en "select" personnalisé et je vois que c'est rarement fait en quelques lignes, donc je suppose que je ne suis pas totalement dans le faux.

 

code (version finale plus bas)

 

EDIT : ajout de commentaires pour ceux qui seraient tentés de mettre le nez dans le JS.


Message édité par MaybeEijOrNot le 03-04-2020 à 01:36:56

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2350630
MaybeEijOr​Not
but someone at least
Posté le 03-04-2020 à 01:35:43  profilanswer
 

Version améliorée et objet : https://codepen.io/Perrier_ChouFleu [...] itors=1111


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Création d'un "select" personnalisé

 

Sujets relatifs
[VB/VBA/VBS] Problème script pour exécuter des programmesDécalage dans un fichier txt
Problème de map sur un arrayprobleme excel en mode partager
Problème alignementProblème code pour un lecteur radio en html5
Problème avec WHERE et un nombreProblème navigation de page wpf
Problème pour structurer le résultat d'une requete SQLProblème de lancement .bat sur windows server 2012 r2
Plus de sujets relatifs à : Création d'un "select" personnalisé


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR