Streamlit Embed in HTML - Github Blogs

🎈 Using Streamlit
1

Hi,
Based on the discussion here, I have tried to embed my Streamlit app to my blog, however, it didn’t fill the page as I expected. I tried this on my desktop, it worked. Do you think github pages do not allow it?
Sorry, I am not good at html.
The link: Hoek Brown Tool · BD
Github link of the page: berkdemir.github.io/HoekBrown.md at main · berkdemir/berkdemir.github.io · GitHub

2

This is working, you just need to be more precise about how large you expect your app to be on the page. Whatever 100% ends up referring to, it’s not the full page in this case:

Screen Shot 2022-05-27 at 10.10.33 AM
Screen Shot 2022-05-27 at 10.10.33 AM1868×732 19.1 KB

A quick look shows you could change the CSS and make the container taller:

.page, .post {
    height: 1200px;
}

I would guess you could add that here, though I did not personally try it:

Best,
Randy

3

Hi Randy,
If you see the last answer in the Github discussion, it results in a very good full page option. If you save this on a local file, you will see that it works great. I am trying to reach this result that I can see in local file, in my github page. Do you have any idea?

<!DOCTYPE html>
<html>
<body>

<iframe src="https://share.streamlit.io/berkdemir/bd-hoek-brown/main/BD_Hoek_Brown.py" width="1200" height="600">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>

<style>
    html, body { height: 100%; }
    body { overflow: hidden; margin: 0; }
    iframe { height: 100%; width: 100%; frameborder: 0; }
</style>

</html>
4

Any help?

5

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