Html files incorrectly displayed in tabs

Using Streamlit
,
1

hi,

I am trying to display an html file in each tab but it is only correctly displayed for the first tab, for all others there is something wrong with formatting. could smn tell me what can be the reason? I tested with he same html file, same happens if I use other files.

tab1, tab2 = st.tabs(['test1', 'test2'])
with tab1:
        file = open('test.html')
        html_content1 = file.read()
        st.components.v1.html(html_content1,height=600, width=600, scrolling=False)

with tab2:
        file = open('test.html')
        html_content2 = file.read()
        st.components.v1.html(html_content2, height=600, width=600, scrolling=False)
2

Works as expected with my own html.

1 Like
3

I have a chart generated with Plotly saved in html format, and it is displayed incorrectly on the second tab ‘test2’. could not find any solution for this

4

I tried with an example from the documentation and got incorrect display in the second tab too.

test1
test11129×864 34.7 KB

test2
test21129×864 34.2 KB

Oddly enough, it is fixed when I reload the iframe. I have no idea why this happens. For anyone interested, here is a standalone example.

import numpy as np
import streamlit as st
import plotly.figure_factory as ff


def generate_plot():
    # Add histogram data
    x1 = np.random.randn(200) - 2
    x2 = np.random.randn(200)
    x3 = np.random.randn(200) + 2

    # Group data together
    hist_data = [x1, x2, x3]

    group_labels = ["Group 1", "Group 2", "Group 3"]

    # Create distplot with custom bin_size
    fig = ff.create_distplot(hist_data, group_labels, bin_size=[0.1, 0.25, 0.5])
    return fig


html = generate_plot().to_html(include_plotlyjs="cdn")
tabs = st.tabs(["test1", "test2", "test3"])
for tab in tabs:
    with tab:
        st.components.v1.html(html, height=400, scrolling=True)
1 Like