Page 1 sur 1

Barre de recherche - addClass fonctionne mais n'applique pas le style.

Posté : 16 août 2019, 09:26
par thirt7505
Bonjour à tous,

désolé de vous déranger de nouveau pour ce sujet mais je ne comprends pas pourquoi j'arrive à ajouter une classe mais que, par la suite, le style de cette nouvelle classe n'est pas appliqué.

En fait, je clique sur la première image qui va ajouter une nouvelle classe (.extend). Cette classe est censée agrandir le champ texte de recherche mais ça ne fonctionne pas.

Par contre, lors du clique sur cette 1ère image, une 2ème image remplace la 1ère et, quand on clique sur cette 2ème image, il y a un message qui est affiché. Cette partie fonctionne.

Voici une copie de mon code :

https://codepen.io/thirt/pen/bGbpJRb

Merci à vous.

Bonne journée
Thierry

Re: Barre de recherche - addClass fonctionne mais n'applique pas le style.

Posté : 16 août 2019, 10:20
par webmaster
Bonjour

Ca doit venir d'une subtilité de CSS. En ajoutant !important dans la classe, on voit que la classe est bien prise en compte

Code : Tout sélectionner

.extend {
  width: 200px !important;
  border: 3px solid #FFF !important;
  border-radius: 40px !important;
}
Mais il faudrait étudier le code HTML pour mieux comprendre

Re: Barre de recherche - addClass fonctionne mais n'applique pas le style.

Posté : 16 août 2019, 10:32
par thirt7505
Bonjour,

merci pour votre aide.

C'est assez bizarre, je trouve. Surtout que le code est assez basique.

Si je trouve la raison, je n'hésiterai pas à vous tenir au courant.

Encore merci et bonne journée.
Thierry

Re: Barre de recherche - addClass fonctionne mais n'applique pas le style.

Posté : 16 août 2019, 10:49
par thirt7505
Bonjour à tous,

voici l'explication pour laquelle le code ne fonctionnait pas correctement :

<<

il s'agit d'un problème de spécificité : si tu Inspectes ton input#search (F12), tu verras qu'après clic il y a bien la classe .extend ET que dans le panneau CSS, les 3 déclarations de cette règle sont présentes mais barrées et moins prioritaires que celles ayant pour sélecteur #search.
Comme les propriétés border, width et border-radius sont définies avec le poids / spécificité d'un id, c'est pas un sélecteur de classe qui va prendre le dessus… Ajoute un background: red par exemple et tu verras qu'il est bien appliqué car pas de background(-color) défini sur #search.

Tu peux pour pallier cela :
- ajouter des !important (moche Smiley orange ),
- remplacer le sélecteur par #search.select (le poids d'un id et d'une classe est supérieur à un id seul)
- ou - je te le conseille - ne pas utiliser d'id (edit : en CSS. Ça reste tout à fait recommandable en JS) (tu viens d'en avoir une démonstration : ça fiche le brin). Remplacer une classe par une autre ne pose pas de souci de CSS (en JS il faut faire attention si on veut remplacer / toggleClass 1 ou toutes les classes présentes ou ajouter une classe, par exemple pour ne pas virer .form-error). Si on l'ajoute, les 2 règles font effet et quand une propriété est définie dans les 2 avec la même spécificité, c'est la dernière écrite qui s'applique (ici .extend viendrait après .search donc pas de souci).

>>

Voici une nouvelle version du code qui, cette fois-ci, fonctionne :

https://codepen.io/thirt/pen/BaBKeEd

Un grand merci à Felipe d'Alsacreations pour son explication à mon problème.

Bonne journée
Thierry