Tutoriel Streamlit : Comment ajuster dynamiquement la hauteur de la zone de texte ?

Question

Dans mon scénario, j'ai deux st.columns avec deux zones de texte. Un pour la saisie utilisateur et un autre pour le texte généré.

Est-il possible d'agrandir la zone de texte à chaque ligne et de supprimer les barres de défilement dans la zone de texte ?

Pendant les tests, je ne peux utiliser que des barres de défilement et je sais que vous pouvez utiliser st.markdown pour insérer du HTML, mais je ne sais pas comment appeler des zones de texte ni comment les modifier pour ajuster la hauteur de manière dynamique.

Answer 1

Vous devez écrire un petit script pour faire le travail. Veuillez consulter le code ci-dessous :

const textArea = document.querySelector('.textarea-test')

textArea.addEventListener('input',(e)=>{
textArea.style.height = "auto"
  textArea.style.height = `${textArea.scrollHeight}px`;
})

<textarea name="" id="" cols="30" rows="4" class="textarea-test"></textarea>