Comment bloquer le redimensionnement d'un textarea dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment bloquer ou contrôler le redimensionnement d'un textarea dans Webflow.

Exemple

Solution CSS (recommandée)

C'est la solution la plus simple. Ajoutez ce CSS dans un embed global ou dans vos styles Webflow via un embed sur la page.

textarea {
  resize: none;
}

/* Ou cibler une classe spécifique : */
.mon-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}

Textarea auto-extensible

Pour un textarea qui grandit automatiquement avec le contenu (sans scrollbar visible) :

document.querySelectorAll('textarea').forEach(function(ta) {
  ta.style.resize = 'none';
  ta.style.overflow = 'hidden';
  function autoResize() {
    ta.style.height = 'auto';
    ta.style.height = ta.scrollHeight + 'px';
  }
  ta.addEventListener('input', autoResize);
  autoResize();
});

Conclusion

resize: none est la solution CSS la plus rapide à appliquer. Le script auto-extensible améliore davantage l'UX.