Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.
Avant
Après
Code CSS
textarea{ resize:none;}
6 commentaires
L'affreux Jojo le 24 Feb à 23:04
L’idée de Chrome est très bonne et en même temps, le problème que tu mets en avant est un “problème”.
La question qui se pose, je trouve : pourquoi réagrandir le textarea ?
Généralement, écrire un commentaire sur un site, c’est peu pratique car l’espace donné aux visiteurs est relativement petit quand on veut écrire quelque chose d’un tant soit peu développé. On peut même parfois se demander si la personne qui supervise le site utilise/teste son outil de commentaire.
Je pense donc que l’astuce proposée, aussi intéressante qu’elle soit, s’attaque au mauvais problème.
Une solution serait de prévoir en aval (lors de la création) une zone de texte plus grande (ou alors de limiter la taille des commentaires).
Jeremy le 24 Feb à 23:23
Hello.
Tu as raison, et c’est pour ça que j’avais mis “ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface”.
Mais il se peut que des personnes utilisent cette redimension sans trop savoir ce qu’elles font, et où le textarea passerait par-dessus un autre élément, ou derrière une autre élément, de manière transparente ou pas.
J’imagine quelqu’un qui l’agrandit par-dessus un menu et qui ne peut plus cliquer sur ce dernier.
Ou alors l’agrandir (comme dans GTalk) et dans ce cas, il disparaît on ne sait où.
Si le design est correct (et j’espère que dans ce formulaire il l’est), alors inutile pour l’utilisateur lambda d’agrandir le textarea.
L'affreux Jojo le 25 Feb à 15:27
Oui, excuse-moi de ne pas avoir clairement vu et souligné que tu trouvais cela aussi une bonne chose que l’utilisateur puisse ajuster la taille de saisie.
Une des seules façons de savoir comment cela se comporte est d’essayer.
Une autre solution (contraignante ?) serait d’agrandir la zone de saisie lorsqu’elle a le focus. Cependant, ceux qui n’ont pas le Javascript, si c’est fait en JS, ne pourraient pas en profiter. Cela dit, combien d’utilisateurs sur des gros sites (Amazon, Google, Yahoo, …) n’ont pas le JS activé ?
meudah le 25 Feb à 19:25
Je ne suis pas contre le redimensionnement, au contraire, mais j’aurai aimé que Chrome le fasse uniquement sur l’axe-y car quand tu agrandis ton textarea et qu’il passe en dessous de tes autres balises ben c’est pas très jolie quoi
Banks le 5 Apr à 09:36
Ohhh my god!!!! Merci à vous car je n’avais pas réalisé d’une part que c’était Google Chrome la cause de ce redimensionnement :/ lol, et d’autre part pour le code!!! J’était en train de me casser le tête au marteau piqueur là!!! Un grand merci!
Antonin le 26 Apr à 12:38
Salut,
Tu peux aussi limiter le redimensionnement avec max-width et max-height comme-ceci :
textarea {
height: 135px;
width: 290px;
max-height: 435px;
max-width: 450px;
}
J’ai testé vite fait dans Safari et Chromium,
ça fonctionne bien. Normalement c’est ignoré par les autres navigateurs (testé sur firefox et opera).