Hi I’m writing an application and need to display the raw text as entered. Only st.text() prints out the text as entered using st.text_input(), all other text elements/print options such as st.write, st.markdown, etc modify the raw text by removing extra spaces etc.
Although st.text() works, its text is small and if its long the scroll bars are invisible until hover/click and above all text doesn’t wrap!
My app requires the raw text to be displayed in a more readable fashion , like in a large text box.
I really do not want to use unsafe html option, unless absolutely necessary.
PLS SUGGEST A WAY TO DO THIS. Thanks.
Have you tried the text_area()?
1 Like
Thanks, I “jerry rigged” text_area() input widget to display the raw text, but the fact that it can still be edited makes it undesirable, but I’lll run with it for now.
There should be a better st.text() type widget that does the job better.
There is an external component streamlit-ace
It is an editor widget and i think you can set a property to readonly=True
thanks tried it but text wrapping doesn’t work!
Can you post a minimal sample code of what you a trying to achieve?
As i said before: my app requires the exact input as entered + a custom string appended to the end of the input to be reviewed by user before submission for processing.
Observe how spaces in the middle of the input string are removed by st.write and st.markdown, vs st.text and st_text_area
code being used:
st.write("#### **st.text_area as OUTPUT for Preview-**")
preview_area = st.text_area(label="", value=st.session_state.twt, label_visibility='collapsed', on_change=warn_no_change,
disabled=False, max_chars=5000)
st.write("#### **st.text OUTPUT for Preview-**")
st.text(st.session_state.twt)
st.write("#### **st.write OUTPUT for Preview-**")
st.write(st.session_state.twt)
st.write("#### **st.markdown OUTPUT for Preview-**")
st.markdown(st.session_state.twt)
Observe how st.text output font is very small and runs off right hand side (also scrollbar is hidden unless hover).
Although the text_area has the best output , the User will be confused as to why they cant edit the text_area box (especially since its editable + looks like an input area)
PS if i make disabled=True for text_area() the font color becomes un-readably dim -If the dimmed Font’s color, etc could be changed that could be sufficient.
THIS IS A BIG ISSUE HOLDING ME BACK, and I’m concerned about releasing on time. PLS HELP.
How does this work for you?
st.markdown(st.session_state.twt.replace(" ", " "))
See also this SO question:
1 Like
Thank you it worked but after playing around noticed returns were ignored.
Basically i need to convert all the raw text entered (which is actually for a tweet) to the equivalent markdown for review purposes so something like the following also works -
4 Spaces here> < return here>
>newline start
If only using st.session_state.twt.replace(" ", " ") this is converted to:
4 Spaces here> < return here>
newline start
Could you pls point me to resource so i can convert the whole input string faithfully to display as markdown (output needs to display same st.text)?
like what are all the conversions necessary?
PS I tried replacing “\n” with
,
,
and “__” (2 spaces) but couldnt get line break
You can’t put newlines in st.text_input() as far as I know. If you want to do this with arbitrary text the best option is using just preformatted text, then making it wrap and adjusting the font. Unfortunately I didn’t found a way to style preformatted text using st.markdown(), but it can be done inside an html component.
from streamlit.components.v1 import html
...
pre_text = f"""
<body style="background: lightgray;">
<pre style="white-space: break-spaces;font-family: sans;font-size: 1.2em">{text}</pre>
</body>
"""
html(pre_text, scrolling=True)
1 Like
Entries in text_area() can be edited. There is control+enter.
Thank you, i’ll use your code.
FYI I was also able to make the following work and its looks decent BUT only 1 issue is that scroll bars only show at hover, otherwise good.
st.markdown("```\n"+ long_string + "\n```")
Ferdy, thanks but you’re misunderstanding the problem.
I’m already using text_area() to get the input, the issue is that I need to give the user a final preview before finally accepting their input. and this is where I’m having issues: displaying the raw text entered by the user.
PS worth noting extremely important to run html.escape() on text/long_string to display BEFORE using the <pre> method. Otherwise html stuff gets rendered and maybe even executed, exposing possible XSS, etc.
1 Like