Why `st.components.v1.html` and `iframe` functions limit the height of the frame to 150

[BexTuychiev]

I am trying to parse an HTML code that got produced from a Jupyter notebook. For example, Plotly or Altair charts get saved as HTML code.

I could parse it using the st.components.v1.html function but when displaying it, the frame’s height is limited to 150 pixels. As a result, the plot is being displayed clipped and not whole.

Why does Streamlit limit the height of custom HTML display? Couldn’t it use auto height, like width? Is there a way around this problem?

[randyzwitch]

Hi @BexTuychiev -

We’re not artificially limiting the height of the iframe, 150px just happens to be the default size for the argument. I don’t remember the exact reason why width is automatically set but height is not, but it has something to do with the fact that custom components are rendered inside of an iframe.

So when developing, if you see that the height isn’t sufficient, you can pass your own height. In the case where the Python object you are displaying has its own height/width parameters, you can do something like this to automatically set the values:

https://github.com/randyzwitch/streamlit-folium/blob/master/streamlit_folium/init.py#L109

Best,
Randy

[BexTuychiev]

Yeah, the approach in the link won’t work as I don’t know the sizes of the object to be rendered beforehand or even after.

What I am really talking about is Jupyter Notebook cell outputs that have HTML code under the hood. Like Plotly or Altair charts, or reports that get displayed from Auto-EDA libraries, etc.

I am working on something that takes those outputs and parses them using Streamlit. But I am having this problem when it comes to HTML.

Isn’t there a chance to make custom HTML components have auto heights like width?

[andfanilo]

As a workaround for a custom component (not for components.html unfortunately), I think @okld does it in the pandas-profiling custom component Pandas Profiling , takes the Pandas Profiling auto-generated HTML and immediately displays it

@okld

A small detail about this component: it resizes according to its content thanks to this iframe-resizer project. No need to choose a height to display the report, no scrolling, it embeds seamlessly to the page.

You can check the code on streamlit-pandas-profiling/ProfileReport.tsx at main · okld/streamlit-pandas-profiling (github.com)

Fanilo

[BexTuychiev]

Hey, @andfanilo

Thank you very much for referring me @okld! He seems to have the exact thing I want. I will contact him for help.

Thanks,
Bex

[Manoj_Jena]

Hi Bex,

I am also facing the same issues with height , my HTML is restricted to 150px only. Please let me know how I can get it resolved.
Please share some code snippet…

Thanks,
MJ

[snehankekre]

Hi @Manoj_Jena

You’ll find a code example to change the height of Streamlit’s HTML Component in our docs:

Components API - Streamlit Docs

Here’s the function signature:

st.components.v1.html(html, width=None, height=None, scrolling=False)

Note: when not set, height defaults to 150. You always have the option set height=custom_height, where custom_height (an int) is the height of the frame in CSS pixels.

[Manoj_Jena]

Thanks for your message.
I am using height in my code. Please find the screenshot. Also one more suggenstion, how I can pass parameter to the htmlcode inside… Please let me know if missing anything …

Thanks ,
Manoj

[Manoj_Jena]

This is the result …that I am getting for my above code. (even though I have mentioned the height)

Thanks,
Manoj

[snehankekre]

You haven’t passed the height to components.html() though. What’s missing is a , height=height after the bottom three double quotes """:

components.html(
    """
    <your_html>
    """, height=height
)

[Manoj_Jena]

Thanks for your quick reply.
But after passing the height values in html component. I am still getting the graph as minimized…

‘’’
def tradingView_Graph(symbol, height=600,width=300, scrolling=True):

components.html(

   """

            <div class="tradingview-widget-container">

        <div id="tradingview_e3e89"></div>

        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>

        <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

        <script type="text/javascript">

        new TradingView.widget(

        {

        "autosize": true,

        "symbol": "NASDAQ:AAPL",

        "interval": "D",

        "timezone": "Etc/UTC",

        "theme": "light",

        "style": "1",

        "locale": "en",

        "toolbar_bg": "#f1f3f6",

        "enable_publishing": false,

        "allow_symbol_change": true,

        "container_id": "tradingview_e3e89"

        }

        );

        </script>

        </div>

   

    """ ,  height=height

),

tradingView_Graph(“PLTR”)
‘’’

[Manoj_Jena]

I have added the code snippet , if you want to run and see.
Please let me know if I am missing anything here…

[snehankekre]

It looks like you have to remove the autosize line and replace it with lines for the height and width parameters.

The example below (which you can adapt to your example) uses f-strings to embed the height and width within the string containing TradingView’s HTML. Note: you need to escape the existing curly braces in the HTML with additional curly braces:

Code

import streamlit as st
import streamlit.components.v1 as components

st.set_page_config(layout="wide")

height = st.sidebar.slider("Height", 200, 1500, 300, 100)
width = st.sidebar.slider("Width", 200, 1500, 600, 100)

components.html(
    f"""
    <div class="tradingview-widget-container">
    <div id="tradingview_e3e89"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">

    new TradingView.widget(
    {{
    "width": {width},
    "height": {height},
    "symbol": "NASDAQ:AAPL",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_e3e89"
    }}
    );

    </script>
    </div>
    """,
    height=height,
    width=width,
)

Output

Best,
Snehan

[Manoj_Jena]

Thank you so much. It solves my issue. Thanks so much for your support.
I think Streamlit is the beautiful thing and makes so much things easier to implement complex things in easier way… Thanks to all for their work… Loving it …

Thanks ,
Manoj

[Manoj_Jena]

Hi Snehan,

I have a related question to iframe.
when I try to use the iframe and use some generic site to display I am getting error that connection refused. I guess something to do with CORs , but do we have option to get rid of that ? or tradinview.com in my case…