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 :

<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />

En fait, la déclaration 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:

2 Comments

Écrire un commentaire

Spelling error report

The following text will be sent to our editors: