Embedding CSS and HTML leaves white space in the page

Using Streamlit
1

Embedding CSS and HTML in the page leaves white space, while it should have height=0.
This changes the page global format.

Here I would expect that the space between text2 and text3, and the space between text3 and text4 are the same as the one between text1 and text2:

html_embedded
html_embedded637×507 27.3 KB

Is there a way to hide this embedded code?
Changing the margins and paddings of element-container cannot be done because the rest of the code would completely change its proportions. Of course if it was possible to assign a class or id to st.markdown and st.components would have easily solved the issue…

import streamlit as st

st.write("text1")
st.write("text2: nothing between text1 and text2")
css = '''
    <style>
        button {
            background-color: yellow;
        }
    </style>
'''
st.markdown(css, unsafe_allow_html=True)
st.write("text3: 'invisible' st.markdown embedded between text2 and text3")
js = f'''
    <script>
        console.log("This is a console.log line");
    </script>
'''
st.components.v1.html(js, width=0, height=0)
st.write("text4: 'invisible' st.components embedded between text3 and text4")


html = '''<hr>'''
st.markdown(html, unsafe_allow_html=True)
st.write("A button to show the style added after text2")
html = '''<button type="button">This is a styled button</button>'''
st.markdown(html, unsafe_allow_html=True)
2

Hi @Nemecsek

Thank for sharing.

3

Add all the CSS and JS at the end.

4

Alas it is not possible in some cases to put everything at the end of the page.
I needed some HTML components at the top of the page and that’s when I found out this issue.

5

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