St.markdown adding a new line on UI

🎈 Using Streamlit
1

Summary

When using html/css code with st.markdown, it creates an empty line space on UI

Steps to reproduce

Code snippet:

import streamlit as st

hide_st_style = """
<!-- CSS code -->
<style>
MainMenu {visibility:hidden;}
footer {visibility:hidden;}
header {visibility:hidden;}
</style>
"""
st.markdown(hide_st_style, unsafe_allow_html=True)

st.write("This is at the top")

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:: It should show the same UI with or without st.markdown
I made sure to not use two spaces in st.markdown to avoid next line

Actual behavior:
If we comment the st.markdown, the write element show the message at the top, but after using st.markdown, the UI enters a new line(empty) and the message from st.write goes in the next line hence increasing the margin from top.

Debug info

  • Streamlit version: 1.24.0
  • Python version: 3.8.17
  • Using Conda

Is this behavior normal in streamlit?
I have a number of st.markdowns in the app I am trying to develop. When the st.header comes, it is displayed in the middle of the page due to st.markdown

2

Hi @shailesh_sharma,

Thanks for posting!

You should move the st.write line above the markdown element as such;

import streamlit as st

st.write("This is at the top")

hide_st_style = """
<!-- CSS code -->
<style>
MainMenu {visibility:hidden;}
footer {visibility:hidden;}
header {visibility:hidden;}
</style>
"""
st.markdown(hide_st_style, unsafe_allow_html=True)

#st.write("This is at the top")

This should move the text to the top just as it would if you commented out the styling and markdown line.

3

I have my app logic after I hide the streamlit menu. Not just this but in case where I have to apply styling on my text in the app, I have to use st.markdown before st.write.
Context: I am developing a chatbot which will have a conversation reload after every new question, in this case I am applying styling using st.markdown which shifts my chat space(the very first question) in the middle of the screen.

4

Can you share a screen recording of the app and how it behaves so I can better help you? Also, if you don’t mind me asking, why do you need to hide the menu in your app?