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?
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:
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?
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
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ā¦
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.
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 ā¦
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:
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 ā¦
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ā¦