Prevent components.html from adding a blank line

🎈 Using Streamlit
1

I have the following code, wherein I want to add custom JS:

import streamlit as st
import streamlit.components.v1 as components

st.write("Start...")
components.html("<script>alert('My Alert Msg!')</script>", height=0, width=0)
st.write("End...")

However, with each invocation of components.html, I get a blank line onscreen.
If the above code is run, a blank line will be output between the ‘Start’ & ‘End’ st.write commands.

Is there a way that this blank line can be not outputted onscreen?

Thanks in advance.

Cheers

2

I use containers to hide iframes at the end when I don’t actually want them rendered. I’m sure some CSS could do the trick too, but perhaps this shortcut would be sufficient for your case? (This usually comes up for me within functions.)

body = st.container()
footer = st.container()

with body:
    st.write("Start...")
with footer:
    st.components.v1.html("<script>alert('My Alert Msg!')</script>")
with body:
    st.write("End...")
3

Thanks @mathcatsand, for the effort and the prompt reply.

At my end, just after posting, I had tried the following code, and it works too:

ph = st.empty()
st.write("Start...")
with ph:
    components.html("<script>alert('My Alert Msg!')</script>", height=0, width=0)
ph.empty()
st.write("End...")

However, this was just an idea for something different: In the JS part, could we pass code to change the visual properties of onscreen widgets by just passing its label parameter (so that we don’t have to inspect the html page and revise the ids with each streamlit revision) each time.

Use case: In a collection of onscreen widgets, colour red the labels of all widgets which are to be mandatory inputs.

I wrote the code for that, and it works very well; however, I cant do away with the blank lines, as the changes disappear if I use st.empty. (I even tried the available jseval components).

Maybe, Streamlit will add that flexibility later.

4 Likes