Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site. Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.

Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :

En fait, la déclaration suivante :

size="15"

ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.

En CSS, la propriété width définit la largeur d’un élément et est exprimée en pixels (px), points (pt), pourcentage (%) ou em. Dans notre exemple, notre champ ayant un ID appelé « recherche », il suffit de lui ajouter :

#recherche {width:15em;}

Et voilà. Notre champ est désormais clairement défini et s’intègre comme il se doit dans le design.

Si vous avez trouvé une faute d’orthographe, veuillez nous en informer en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée .

Vous souhaitez réaliser un nouveau projet WordPress ou WooCommerce, ou ajouter de nouvelles fonctionnalités? Ou améliorer les performances de votre site?

Parlons de votre projet »

Articles en rapport:

Matt
Author

Matt est formateur, développeur expert WordPress et WooCommerce, et administrateur réseau chez Codeable.

2 Comments

Écrire un commentaire

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :