Help with output - iframe too small

🎈 Using Streamlit
1

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="https://cdn.layerjs.org/libs/layerjs/layerjs-0.5.2.min.js" defer=""></script>
  <link href="https://cdn.layerjs.org/libs/layerjs/layerjs-0.5.2.css" type="text/css" rel="stylesheet">
#   <link href="style.css" rel="stylesheet">
<style>
div {    height: 100px;
    text-align: center;
}
</style>
</head>
<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
      <br>
      
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <style>
    .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) */
    }
    </style>
      <a href="#more" id='Image 1'><img width='21%' src='https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=200' class='zoom w3-circle w3-hover-opacity'>
        
      </a>
    </div>
    <div lj-type="frame" id="more">
      More content...
      <br>
      <a href="#home&t=2s&p=zoomout">Back to home</a>
       
    </div>
  </div>
"""

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

components.html(content)

Output:

image
image1377×325 6.36 KB

2

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:

3 Likes
3

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?

@marduk

1 Like
4

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).

5

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
6

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