I would like to hide "Full Screen" and "Built with Streamlit" when embed=true

Deployment
1

After embedding the streamlit app in an iframe and deployed to production, I am getting this

Screenshot 2023-10-02 at 11.14.27 PM
Screenshot 2023-10-02 at 11.14.27 PM2874×116 89.7 KB

Which is not present when running on local URL. Is there any way to hide it?

2

You may try this @Dev_D

hide_streamlit_style = """
            <style>
            footer {visibility: hidden;}
            </style>
            """
st.markdown(hide_streamlit_style, unsafe_allow_html=True)
3

I tried multiple things which did not work
hide_st_style = “”"

#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
header {visibility: hidden;}
div.embeddedAppMetaInfoBar_container__DxxL1 {visibility: hidden;}

“”"
st.markdown(hide_st_style, unsafe_allow_html=True)

4

Perhaps this has something valuable as it was active relatively recently: Remove "built with streamlit" when embedding app on another page · Issue #6722 · streamlit/streamlit · GitHub

5

Using /?embedded=true (rather than /embed=true) at the end of your iframe src=URL gets rid of the Balloon-Built with Streamlit-Fullscreen footer. But it puts the top menu toolbar on (including the Github fork option etc) which is arguably worse.

The only way I’ve found to get rid of the footer is to cover it up. The html below puts the iframe in a wrapper and then puts a mask on top of the Balloon-Built with Streamlit-Fullscreen footer using the .hidefooter style class. In this case the mask is 150px wide to hide the ‘Fullscreen’ bit (I don't mind the other bit). But if you change the .hidefooter width to 100% that will cover the whole thing.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
          margin: 0;
        }

        .wrapper {
          position: relative;
          z-index: 1;
          display: inline-block;
          width: 100vw;
        }

        .hidefooter {
          position: absolute;
          width: 150px;
          height: 35px;
          background: rgb(242,240,246);
          right: 0px;
          bottom: 0px;
          z-index: 2;
          display: block;
          color: rgb(0, 0, 0);
        }
    
        iframe {
          display: block;
          background: #ffffff;
          border: none;
          height: 99vh;
          width: 99vw;
        }
        </style>    

</head>
<body>
  <div class="wrapper">
    <div class="hidefooter"></div>
    <iframe src="https://<<your.app.URL>>/?embed=true">
        <p>Your browser doesn't support iframes</p>
    </iframe>
    </div>
</body>
</html>

(Add your own content to the footer by putting it between <div class="hidefooter"></div> tags.)

1 Like
6

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