Taille de champ non redimensionable

Bonjour,

Dans un formulaire bootstrap, j'ai un champ de saisie de type input. A chaque caractère tapé, Je teste via jquery la longueur de la chaine de caractère, et si celle-ci dépasse la largeur du champ, je diminue la taille de police, pour que toute la chaine soit toujours visible dans le champ.
Le problème, c'est que quand il réduit la taille de police, il adapte la hauteur du champ input.
Comment faire pour que la hauteur du champ input reste égale à la hauteur initiale, malgré le changement de taille de police?

J'ai essayé avec du css:

Code:

---

input.form-control { resize: none }

---

Mais ça n'a aucun effet...

Merci,
Nico

Peut-être une piste ? https://www.developpez.net/forums/d2...gueur-d-texte/

l'attribut resize st très différent de ce que vous imaginez.

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

En l' occurrence lorsque vous modifiez la taille de la police,
il me semble que le navigateur ajuste l'interligne,
et donc, le champ de saisit s'ajuste par effet de bord.

Le souci est que l'input s'ajuste à la taille de la police à al fois en largeur mais aussi en hauteur ...
Le lien donné était supposer te faire réfléchir sur la possibilité de calculer la largeur du texte entré afin d'attribuer une largeur à l'input ...
Vu que tu passes par la taille de police il faudra arriver à désolidariser la hauteur de l'élément, voire peut être passer par un span ou un div en contenteditable ...

Bonjour,

Citation:

---

Envoyé par DiverSIG

Je teste via jquery la longueur de la chaine de caractère, et si celle-ci dépasse la largeur du champ,

---

il suffit de comparer les propriétés clientWidth et scrollWidth pour voir si il y a débordement.

Citation:

---

Envoyé par DiverSIG

Comment faire pour que la hauteur du champ input reste égale

---

il suffit de la fixer :

Code:

---

1 2 3

input { height: 24px; /* surtout pas en em ou alors en rem */ }

---

Nota: cela reste une idée bizarre, qu'advient-il lorsque la police devient franchement petite !?!