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

Deployment
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