Streamlit Components: Embedding an iframe that is dynamic to the sidebar

Using Streamlit
1

Summary

I am trying to embed an iframe inside my streamlit app using components.html and I am forced to specify the height and width in the function. The problem is when the sidebar opens/closes the size of the iframe does not change (not dynamic). I was wondering what workaround I could do to make the iframe dynamic to the sidebar or even to the screen size.

Also first time posting so apologies if this isn’t clear.

Steps to reproduce

Code snippet:

components.html('''
  <iframe
      src="link _to_iframe"
      width="1000"
      height="3000"
      frameborder="0">
  </iframe>
 ''',height=3000,width=1000)

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

Expected behavior:

Dynamic iframe where the size changes depending on the size of the screen or the sidebar showing or not.

Actual behavior:

Fixed height and width even with different screen size and sidebar state being different.

Debug info

  • Streamlit version: 1.21.0
  • Python version: 3.9.13
  • Using PyEnv
  • OS version: Ventura 13.0
  • Browser version: Version 112.0.5615.137
2

Found the solution here : html - How to set iframe size dynamically - Stack Overflow.

1 Like
3

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