Help with output - iframe too small

I have a small issue: my code works, but Streamlit is showing it in a miniscule iframe so it isn’t actually usable. The code is below and a picture of the output is also.

Could anyone perhaps help?

@randyzwitch @thiago

content = """
  <script src="" defer=""></script>
  <link href="" type="text/css" rel="stylesheet">
#   <link href="style.css" rel="stylesheet">
div {    height: 100px;
    text-align: center;
<body height: 1000% lj-type="stage">
  <div lj-type="layer" id="content-layer" lj-fit-to="responsive-width" lj-transition="fade" height=1000px>
    <div lj-type="frame" id="home" lj-transition="zoomout">
      Hello World
      <link rel="stylesheet" href="">
    .zoom {
    padding: 10px;
    width: 210px;
    height: 210px;
    transition: transform .21s; /* Animation */
    margin: 0 auto;
    .zoom:hover {
    transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
      <a href="#more" id='Image 1'><img width='21%' src='' class='zoom w3-circle w3-hover-opacity'>
    <div lj-type="frame" id="more">
      More content...
      <a href="#home&t=2s&p=zoomout">Back to home</a>

# my_js = f"<script>{content}</script>"



Hi @ryanblumenow ,

The components.html function accepts width and height arguments, so you can adjust the size to your needs. API reference here: Components API - Streamlit Docs

Hope that helps :slight_smile:


That’s awesome, and yes it is working now. I had to integrate the height into the components.html function as well as include the CSS code for height of the frame/HTML stage into the content of the JS code.

Is there a way to determine via the code what a user clicked on and from there to do something in Streamlit? e.g. if the user clicks a particular picture in my JS/CSS code, then I can set a variable and from there tell Streamlit to do something based on the value of the variable?


1 Like

My skillset is limited so I don’t know if what you ask is possible :slight_smile: Maybe someone else can answer (though maybe the way to go is to create your own custom component, which allows for inputs and outputs).

I wrote a detailed tutorial on Streamlit components, which includes one that’s a pure static HTML/JS implementation. Give it a whirl… have some fun. :balloon:

1 Like