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="" />Code language: HTML, XML (xml)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;}Code language: CSS (css)Et voilà. Notre champ est désormais clairement défini et s’intègre comme il se doit dans le design.
Vous voulez un site WordPress ou WooCommerce qui soit à la fois rapide et performant? Vous êtes au bon endroit.
Ravi d’avoir pu aider :-)
C’est très sympa, merci ;)