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.

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

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:

2 Comments

Reply To Matt Cancel Reply

Spelling error report

The following text will be sent to our editors: