From streamlit.components.v1 import html renders extraneous Content to Screen

Using Streamlit
1

I am running a combination streamlit frontend, FastAPI backend on my local computer. The frontend asks the user some questions and then gets a text response which I want to show in a scrollable HTML window on the frontend. To do this I used this code:

from streamlit.components.v1 import html

st.markdown(html(original_text, scrolling=True, height=400), unsafe_allow_html=True)

It does the job, but it always adds this extraneous text at the bottom of the window that I cannot figure out how to get rid of like this:

image
image744×804 74 KB

QUESTION: Any thoughts how to get rid of that bottom text starting with DeltaGeneator and ending with id=")))???

2

Get rid of the call to st.markdown().

1 Like
3

But then how can i display the html? I thought it was markdown that allows me to display the html directly.

4

From the docs:

st.components.v1.html

Display an HTML string in an iframe.

See also the example in the linked page.

5

I tried this:

from streamlit.components.v1 import html
returned_text = html("This is my text!", scrolling=True, height=100)
text_display = F'<iframe src="data:text/plain;{returned_text}" width=400 height=600 type="text/plain"></iframe>'
st.markdown(text_display, unsafe_allow_html=True)

But it still shows this extraneous text underneath the window as follows:

image
image1466×406 17.4 KB

6

OK, I retried this way and this works:

my_text = “This is my text!”
new_text = “

” + my_text + “

” + my_text + “

” + my_text + “

”

components.html(new_text, height=80, scrolling=True)

7

That’s again because the call to st.markdown(). I am afraid returned_text is not what you think it is.

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.