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 :

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

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.

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Contactez-moi

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

CSS : définir la taille d'un champ texte

par Matt Lecture: 1 min
2

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: