Autorefresh creates a empty div

[PYBurosseAG]

Hello,

I'm using streamlit to create an app that can run tests. Once a test starts, I use autorefresh to let the page update and display results as they come. But when autorefresh is called, it creates an empty div that moves the rest of my page down. I can't find a way to make it disapear, or make it invisible or something ? Is that a normal behaviour ?

https://github.com/kmcgrady/streamlit-autorefresh/assets/131472614/17d24c51-df2f-467d-9d7b-9b68530eca98

[kmcgrady]

Unfortunately, this is a side-effect of custom components. Streamlit intended the components that make space and so there is default spacing above and below the component.

So, unfortunately, I cannot solve it directly, you can do a couple things. You can target the component and remove the space explicitly in CSS (using markdown and unsafe html). You can also put the autorefresh at the bottom to have the added space be below the the UI itself so it's less visible. 😕

You are welcome to file an issue on Streamlit's repo to make the space collapse when the component is zero height (though I imagine it's not easily straightforward.

[jasonalsing]

at least as of streamlit 1.36 and streamlit-autorefresh 1.0.1 you can set the visibility of the element to "none" like so:

 st.markdown("""
     <style>
         div[data-testid="element-container"]:has(> iframe) {
             display: none;
         }
     </style>""",
     allow_unsafe_html=True
 )

does not seem to impact the running of the refresh code.